This is the first time I'm working with tailwind css , after I did the required installations , and linked my styles.css file to the html file ,it only removed the default html but did not apply any stylings
If you're sure you correctly followed the installation guide on tailwind docs and have the tailwind CSS IntelliSense vscode plugin installed, but still facing the same issue, try running this snippet code on your settings.json file on vscode.
"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"strings": true },
"css.validate": false,
Related
Problem Background:
I have a tauri app set up in Linux (Pop OS), with sveltekit with vite as the frontend framework, and typescript and SCSS being the languages I code for scripts and styles.
Vite is also hot reloadable.
There's an app.scss for overall styles and components scoped scss defined in each components using the <style lang="scss"> tag
Problem Description:
When I run the pnpm tauri dev command, the built executable will be executed for development debugging.
While the scss file app.scss and some component scss is being loaded, other components scss seems to be not working. (See image below)
Since it is using vite as a dev server, I used a browser to visite the website and see if it is a tauri issu, and the webpage in browser seems to be having different components that doesn't load SCSS as expected. (See imaghe below, the palce holder image should have paddings around it but it doesnt)
When I try to update the SCSS for the components then undo the changes, after hot reload, the scss would work again, so there shouldnt be a mistake in my scss syntax or such.
There's also no error when building the application.
I recently pushed my projects to the hosting sites but some css arent working. After some inspecting, I found out that <script src="https://cdn.tailwindcss.com/?plugins=forms"></script> are showing errors. It says that cdn.tailwindcss.com should not be used in production.. I installed the tailwind cli according to the documentation. But if I delete the script the css doesnt work, what should i replace that <script src="https://cdn.tailwindcss.com/?plugins=forms"></script> with?
Duplicate Question?
Yes it is. But a little bit different from this
Overview:
I am also a new user of the brackets text editor. I know the difference between Scss & Sass. But the reason why I am using brackets text editor is for just Sass not Scss.
I saw some tutorials of Jason Sanjose for integrating Sass in brackets text editor. But I think. I am not doing it right. Below is my steps. What I am doing.
Install Sass for bracket using Extension Manager.
Install bower and bourbon
Create folder on root named: "SASS" and inside this folder create app.sass file.
Create folder on root named: "CSS"
Create a config file named: ".brackets.json" and put below code inside it:
{
"sass.enabled": false,
"path": {
"SASS/app.scss": {
"sass.enabled": true,
"sass.options": {
"outputDir": "../CSS/",
"includePaths": [],
"sourceComments": true,
"outputStyle": "nested"
}
}
}
}
and here is the snapshot also
Question:
When I write below code in app.sass file it is not converting it to css file or creating any css file in output directory.
body
background-color: black
Now my question is: Please explain me how I convert sass file in css or tell me what I am doing wrong in ".brackets.json" file or in my "app.sass" file.
After a lot searching on web. I found a useful article and my answer. Which I am sharing with you guys.
Brackets-SASS Plugin setup
Step By Step Tutorial Without migrating on other apps.
You don't need to install Sass in you text editor mate,only thing you need to install on your computer is Prepros,that software support sass/scss coffeescript typescript FTP upload and much more
I personally recommend installing Koala.app - it's fully automated and refreshes on save.
Text editors can come pre-packaged or with an addon that highlights SASS and SCSS, but all (which I know of) cannot compile it.
I'm using gulp-ruby-sass to compile my css and generate source maps for a site built on Jekyll. The source maps are being generated. When I inspect a style, a Sass partial is identified as the source of that style. But when I click on the filename, I'm taken to an empty window. I need my entire scss directory copied into the _site directory when the site is generated. But Jekyll ignores all files prefixed with an underscore, so all Sass partials are automatically excluded. I've tried adding, scss, scss/_sass_partial.scss, and scss/**/*.scss to the include property of Jekyll's _config.yml. This property is supposed to force inclusion of files that would otherwise be automatically excluded such as .htaccess. But this does not work for my Sass partials. Jekyll includes the partials only if the underscore is removed. Does anyone know a way of dealing with this?
This will work :
include:
- _sass_partial.scss
But you can also add a gulp task :
gulp.task('copy_sass', function(){
gulp.src('./sass/*.scss')
.pipe(gulp.dest('./_site/sass'))
});
I am using Typescript SDK 0.9.1.1 and WebStorm 7. I have a .ts file with a file watcher transpiling its .js and sourcemap files. I also have an HTML file that looks like this...
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="output">5</p>
<script src="HelloWorld.js"></script>
<script>
var u = new Utils();
document.getElementById('output').innerHTML = u.plusOne(5);
</script>
</body>
</html>
The plusOne function simply takes the number (in this case, 5) and returns that number plus one. My page, javascript and Typescript work fine, because the page says "6" when loaded.
I can set breakpoints in the .js file and they are hit (showing me the Typescript file's equivalent line) but if I set breakpoints in the original .ts file they are not. I've searched for this issue but my problem seems different from others' - I am running locally (not remotely) and I am setting the breakpoints in WebStorm, not Chrome's debug view.
In WebStorm, the Scripts tab shows only the .js and .html files. Should I be seeing more here? If that's the problem, how do I fix it? I've opened the debug configuration but I don't see a way to add the .ts file there.
To those of you that got here via Google:
All I had to do was make sure that sourceMap was set to true in my tsConfig.json like so:
{
...
"compilerOptions": {
...
"sourceMap": true,
...
},
...
}
Turns out this is due to an open bug in WebStorm. In practical terms, the workaround is to reload the HTML page from the browser (which is NOT the same as rerunning the HTML page in debug mode from WebStorm). If you do that then the breakpoints in the .ts file will be hit.