How to solve CSS intellisense for VSCode not working?

Question

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.

Gum

No need to feel bad, I've had this happen to me too. I cannot remember what the fix was but apparently some later extensions can break the Intellisense provided by earlier extensions (this is not necessarily your problem though). You might try re-installing the extension that was providing your CSS intellisense. – Misplace

Does this answer your question? VScode autocomplete doesn't work for CSS files – Rooky

Answer 1

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!

Ilium

Answer 2

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.

Christianly

disabling postcss language support extension solved the issue for me too. – Rok

Answer 3

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:

1. Open the command palette and select Preferences: Open Settings (JSON)
2. Add the following configuration:

{
  "emmet.includeLanguages": {
    "postcss": "css"
  }
}

This should fix your css autocomplete, it is what worked for me.

Howund

Emmet was working for me without the change. But intellisense is still not working though. Like when I type min-hei..., vscode suggested min-height, but that's not working when the postcss extension is enabled – Diagonal

the above config is already present in your emmet.includeLanguages? – Howund

yes, the "postcss": "css" config is already present in emmet.includeLanguages – Diagonal

Answer 4

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.

Blindly

Answer 5

if you install extension POSTcss try to disable

Anlage

Answer 6

I have installed this extension in vs code. CSS, HTML and Bootstrap intelligence showing up.

IntelliSense for CSS class names in HTML

Lucic

Answer 7

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

Schrick

Answer 8

-Open VSCode

-Click Code in the toolbar

-Go to Settings>>Settings

-Click Text Editor to open the dropdown

-Click Files

-Under Associations enter *.css for the "Item" column and enter css for the "Value" column

-Repeat this with "Item" css "Value" css

Misconstrue

Answer 9

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:

1. 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.
2. Restarting the editor again.
3. Filing an issue on their GitHub page if it's still not working.

Footboard

Answer 10

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.

Feudalize

Answer 11

Like @timbhison mentioned, I just checked my file type and changed it to "CSS" instead of "CSS liquid" and this solved my problem. Adding the below code didn't have any effect.

{
  "emmet.includeLanguages": {
    "postcss": "css"
  }
}

Magnesite

Answer 12

I disabled the extension -> "PostCSS Language Support". That fixed the bug

Calcifuge

Answer 13

Try changing your editor from "ui" to "json" in the settings. (File->Preferences->Settings). Then you may have to use the toggle icon if your current display is the json file. (My icon at the upper right of the screen says "Open Settings"). I am using version 1.87.2 so yours might say something different.

Choose the Settings editor under the Workbench option (or type "workbench.settings.editor" in the search bar) and you can change it from 'ui' to 'json'. Once I changed it, my intellisense starting working again.

Undervalue

Answer 14

{ "emmet.includeLanguages": { "postcss": "css" } }

I solve it by adding this to JSON in the middle

Machismo

This is a poorer version of @lanxion's answer. – Miksen