Well, this is embarrassing, basically, the CSS Intellisense stopped working out of the blank, not sure if I can relate it with the installation of TailWind Intelissense extension, interestingly it works on SCSS files, but if I try it in a vanilla HTML + CSS project it does not work. I am using Fedora 35. I already tried restarting the editor as recommended on the official website.
I had the same issue. So, I solved it by adding
"files.associations": {
"*.css": "css",
"css": "css"
}
to my my settings.json file. Don't know is it is going to help you, but anyway. Good luck!
I know this is a little late for the answer, but I had the same issue when using tailwind.
Given that you are using tailwind, most likely there is a chance you are using postcss, which you can confirm by checking postcss.config file.
If that is the case, then install the postcss vscode extension, and follow the instructions:
Open the command palette and select Preferences: Open Settings (JSON)
Add the following configuration:
{
"emmet.includeLanguages": {
"postcss": "css"
}
}
This should fix your css autocomplete, it is what worked for me.
When I'm using a basic style.css file, even after adding "postcss": "css" in "emmet.includeLanguages":{} CSS Intellisense still doesn't work.
Disabling the postcss VSCode extension allows CSS Intellisense to work properly for me.
if you install extension POSTcss try to disable
Another late answer but it seems this is still an issue when using the extension PostCSS Language Support.
Solved by uninstalling that extension and replacing with PostCSS Intellisense and Highlighting.
Here's what the official website says if IntelliSense isn't working:
Troubleshooting #
If you find IntelliSense has stopped working, the language service may not be running. Try restarting VS Code and this should solve the issue. If you are still missing IntelliSense features after installing a language extension, open an issue in the repository of the language extension.
…
A particular language extension may not support all the VS Code IntelliSense features. Review the extension's README to find out what is supported. If you think there are issues with a language extension, you can usually find the issue repository for an extension through the VS Code Marketplace. Navigate to the extension's Details page and select the Support link.
You should probably try:
Disabling any extensions that may be related to the issue. You mention that it may have to do with the TailWind Extension; try disabling or uninstalling that and see if the intellisense starts up again.
Restarting the editor again.
Filing an issue on their GitHub page if it's still not working.
I came to this question having a similar issue and found I just needed to manually change the language mode in the bottom right to CSS rather than Post-CSS. Obvious in hindsight, but just recording here in case anyone hasn't tried it.
I have installed this extension in vs code. CSS, HTML and Bootstrap intelligence showing up.
IntelliSense for CSS class names in HTML
Follow these steps:
Click on Select Language Mode option in the Status Bar of VSCode
Click on Configure File associations for .css in the modal opened
Configure the language you want to associate your *.css files to. Here in our case, you need to select CSS
Reload VSCode window if changes don't get reflected
In my dev environment the site looks as expected, however when I run gatsby build my CSS does not display properly. If I manually navigate to another page then the CSS displays as expected.
There are no errors but I do get this warning:
The resource
http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally.
When I inspect that file it shows:
{"pageContext":{}}
The fact that that object is empty is my issue I assume. I have tried disabling the service worker but that only made the issue worse.
I've also tried
forcing a build and disabling the cache on netlify,
deleting npm and package.json files and then running npm build,
but no luck so far.
This could be related to the fact that main component e.g Layout unmounts and remounts on every page.
Try to refer your css files in gatsby-browser.js file which is provided by default and is located in the root of your project.
For example you could try do following:
// gatsby-browser.js
require('./my-global-styles.css')
It'll also work with gatsby-plugin-sass
// gatsby-browser.js
import './src/styles/my-global-styles.scss'
For more info visit: https://www.gatsbyjs.org/docs/browser-apis/
I have the same issue. In my case, gatsby-plugin-styled-components was missing in my gatsby-config.js.
https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/
https://github.com/gatsbyjs/gatsby/issues/8984
I have a problem with a project in Laravel, the problem is that when you edit CSS code or add images and reload the page, changes do not apply.
eg I had an image called 1.jpg which was then deleted, replaced with 2.jpg. I edited the code calling the image 2.jpg, but even after reloading the page, 2.jpg is not displayed.
It is not browser cache - I've tried clearing it, but the issue remains. This also happens to me when I edit CSS - the changes are not applied. Any ideas? I've used Sublime text 2 and 3 with windows 8.1.
I've tried php artisan cache: clear, deleting the cache of the project, and no luck. I'm going crazy, can anyone suggest what to do?
If you are adding the css in the resources/sass/app.scss then you need to run after it npm run dev , this will compile your css.
I suggest adding the css internally in the file in the head tags or even inline css. But everytime you make changes to your resources/sass/app.scss you need to run npm run dev
I have a sinatra app using the rack-livereload and guard-livereload gems.
guard 'livereload' do
watch(%r{views/.+\.(erb|haml|slim)$})
watch(%r{.+\.(css|js)$})
end
When I make changes to my erb files, the browser reloads. It works as expected.
I'm using the sass gem for my css.
When I make changes to my .scss file, the css is not updating. The changes are not visible in the browser until I refresh the page. The sass is working - but is not being picked up by active reload.
Any idea how I set this up?
It looks like it's not reloading because the regex in the watch statement is only looking for files that end with .css or .js. If you want to make sure your .scss files get included, just change the watch statement to this:
watch(%r{.+\.(css|scss|js)$})
Another stylesheet that was missing from the page (404) stopped livereload from working for my case, it wasn't the stylesheet in concern but it prevent livereload from detecting the change in the one that I was making.
I switched to the Rails 3.1 and found interesting (for me) stuff - when I update something in my application.css, these changes will not be applied after I refresh my browser. And the same with application.js.
How can I get the CSS and JS files to update after I refresh my browser?
Thank you
Sounds like you've run rake assets:precompile, which caches these files in public/assets. Runrake assets:clean` to clear this.
Read the Asset Pipeline guide for more explanation.