Tailwindcss Intellisense not working in VS Code

Question

I have checked out many answers from Stack Overflow but I wasn't able to fix the issue that IntelliSense not working for Tailwindcss. But vscode Intellisense working for other things like python and javascript. Please anybody help me why this isn't working. I am using Tailwindcss Cli. even CSS file Intellisense also not working.

my config file is. tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

I also added this setting into .vscode/settings.json

{
"css.validate": false,
"liveServer.settings.port": 5501,
"tailwindCSS.emmetCompletions": true,
"tailwindCSS.includeLanguages": {
  "plaintext": "html",
  "javascript":"javascript"  
},
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
},
"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass"
]}

once a thing. CSS compiled successfully but Intellisense not working. and this is my project folder structure. please anybody help me, please.

Begone

Try restarting VS Code, and if it doesn't work then remove and re-install the Tailwind CSS VS Code extension. At least that worked for me. – Outface

yeah... sure.. but I checked those things before posting this question... thank you soo much – Begone

Answer 1

I think you almost got it... i added this to my settings and it worked.
what you are missing (in my opinion) is "inlineSuggest" - full snippet here:

"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true

Sarah

This is the answer – Architecture

nope this isn't the answer i already set this one long time ago – Jacquesjacquet

Where is settings? – Urgency

Answer 2

I found that intellisense for the extension will not work with single quotes. I had my ESLint config set to "jsx-quotes": ["warn", "prefer-single"]. If I use double quotes in my classNames, the intellisense works fine.

The solution for me was to update my settings.json to include "editor.quickSuggestions": { "strings": true }

Path

Answer 3

My case was because I haven't updated my VSCode version. I knew the trouble because I checked on the Output Log > Tailwind CSS IntelliSense. You might need to check the log as well because the trouble can vary.

Here is the screenshoot of the output:

Outskirts

So I can learn from this. What about this output helped you come to that conclusion? – Hora

@Hora Before checking the output, I was not sure if something went wrong with the extension, the VSCode, or something else, it just didn't work. Once I checked the output, I saw the part "Failed to load workspace moduels", and then knew that there was something wrong with the extension. I then updated to the latest version of both VSCode and the extension, and that cleared the issue. – Outskirts

Answer 4

In my case because I changed my user's name file in the past so VS Code has error 5 with auto-update. When I fix that error and updated lasted version, it work

Raising

Answer 5

Did you install the Tailwind CSS IntelliSense extension?

Occupy

yeah... I have installed this extension... – Begone

also not working IntelliSense for any library like react... – Begone

Does IntelliSense work for anything at all? – Occupy

yes.. intellisense work for other things such as for python, for javascript, for CSS property name. but not working for Tailwindcss.. – Begone

Does this answer your question? My TailWind CSS Intellisense plugin just isn't working on my VSCode – Occupy

Answer 6

After trying every solution out there, the only thing that worked for me was to install the previous version of Tailwind CSS IntelliSense extension.

Antichrist

Answer 7

In my case it was the name of the parent folder.

I structure my folders like this: D:\[1] git and inside I have all the projects.

For some reason tailwind intellisense wouldn't initialize, even after I did everything already suggested.

But when I changed the parent folder to D:\git it worked.

So deleting the [1] from the path seemed to do the trick.

Lezley

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Ody

Answer 8

If you have already installed the extension and had no luck with other answers, invalidate cache/remove node modules and yarn/npm your project again.

Heartily

Answer 9

Try this if you still can not fix this problem:

1. Uninstall Tailwind CSS Intellisense from your VSCode and close it
2. Go to where your local vscode exntensions are stored, mine is "C:\Users\Admin\.vscode\extensions"
3. Check if there're any folders called bradlc.vscode-tailwindcss, if yes then delete all of those
4. Now, re-open your VSCode and install Tailwind CSS Intellisense once again

Sociality

Answer 10

Update/Install extention: Tailwind CSS IntelliSense

Urgency

Answer 11

If you are using monorepo, Just add empty tailwind.config.js in root, and make sure those files are correct, any error in tailwind.config.js file of that directory can lead to intellisense not working

// just to get tailwindcss IntelliSense in all files
module.exports = {};

Etheline