'My TailWind CSS Intellisense plugin just isn't working on my VSCode

So the description of the plugin is that it'll display suggestions of classes when am working on the markup, but it doesn't. I've reloaded the plugin countless times. I even restarted vscode and eventually re-installed it. Of course, I did the npm install tailwind and other utilities needed... I even have my tailwind.config.js file in my project if that helps to answer my question. Thank you.

visual-studio-code tailwind-css

Solution 1:^[1]

I'm using tailwindcss in a react app. Tailwindcss Intellisense plugin was not working in my VSCode but then i installed HTML CSS Support extension and now i am getting suggestions of classes.

HTML CSS Support

Solution 2:^[2]

What helped me was to check whether the plugin had any issue loading. You can do this by checking the output view:

CTRL + SHIFT + P to bring up the command palette
Search for "Output: Focus on Output View"
In the Output View, search for tailwindcss-intellisense

For me the error was Failed to initialise: ReferenceError: defaultTheme is not defined - I was missing a require for the defaultTheme.

Solution 3:^[3]

To fix this issue try using ctrl + space

This is the easiest way I found to get Tailwind IntelliSense to work with .js files to React. You need to do this every time you are adding a new class but it's quicker than checking the documentation every time.

Credit: Reddit

Solution 4:^[4]

Its actually a pretty simple fix. open your settings.json file then add this to get the intellisense working on all files

"tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "css": "css"
},
"editor.quickSuggestions": {
    "strings": true
}

Solution 5:^[5]

for me..

I installed 'IntelliSense for CSS class names in HTML', 'HTML CSS Support', 'CSS Peek' all together with reinstalling..

It works now.

Solution 6:^[6]

To anyone still facing this problem, I found that the tailwind extension doesn't recognize your tailwind.config.js file if it's untracked (not added to source control). Once I added the file and did git commit, the extension worked.

Solution 7:^[7]

if you're using nuxt/tailwind module be sure to init tailwind.config.js as doc says.

npx tailwindcss init

then restart the vs-code. it should automatically be active.

Solution 8:^[8]

I'm using tailwind + create-react-app + typescript, I solved it by changing the extension setting "Tailwind CSS: Include Languages", to {"plaintext": "ts"}.

I don't know why it didn't work in the first place, it was working for my other projects.

Solution 9:^[9]

Without pressing ctrl-space, I just need to press space and the classes will come out.

Solution 10:^[10]

I fixed it by creating a tailwind.config.js file with the help of npx tailwindcss init command. I was following tutorials of net ninja (youtube channel) and he mentioned this solution.

Solution 11:^[11]

If you are using tailwind with react, typescript, javascript, styled-components, and twin-macro, you have to add classRegEx manually to get the IntelliSense

To achieve this edit the user settings as below

 "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["classnames\\(([^)]*)\\)", "'([^']*)'"]
  ],

For more information and to see what classRegEx should use with other techs read this

Solution 12:^[12]

This setting is good working for react.js application

{
    "tailwindCSS.experimental.classRegex": [
        "class:\\s*\"([^\"]*)\""
    ],
    "emmet.triggerExpansionOnTab": true,
    "tailwindCSS.emmetCompletions": true,
   
    "editor.quickSuggestions": {
        "strings": true
    }
}

Solution 13:^[13]

Running Tailwind CSS: Show Output from View -> Command Palette (or Ctrl + Shift + P), as suggested here, unveils that the "Tailwind CSS IntelliSense" plugin is looking for a proper npm installation of the module tailwindcss.

Solution: We can therefore fix the issue by simply running

npm install tailwindcss

within our project directory.

Solution 14:^[14]

for me helps installed plugin IntelliSense for CSS class names in HTML

Solution 15:^[15]

I am using Tailwindcss with Django.
Facing the same issue where Tailwindcss IntelliSense plugin is already installed and autocomplete wasn't working.

Finally I got the perfect solution.

For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind and its peer-dependencies via npm.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

In my case the postcss and autoprefixer was not installed.
You can run the above command and npm will take care of it if you have Tailwindcss already installed.

Also don't forget to put these lines in your settings.json in VSCode (Recommended VS Code Settings for Tailwind CSS IntelliSense):

// VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as @apply. You can disable this with the css.validate setting

"css.validate": false,

// By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

"editor.quickSuggestions": {
     "strings": true
},

// This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. html, css, or javascript):
    
"tailwindCSS.includeLanguages": {
     "plaintext": "django-html"
},

Solution 16:^[16]

Rails erb - Custom class name completion contexts

Add to settings (ctrl + shift + p)

"tailwindCSS.experimental.classRegex": [
        "class:\\s*\"([^\"]*)\""
]

See github issue reply

Solution 17:^[17]

I did Smit @Barmase solution but also added "plaintext" and "tsx".

Now everything works when I hit space after previous class.

Solution 18:^[18]

In my case, the code completion not working without the start tag >.

Not work:

<div class=""

Work:

<div class="">

My best practice

Strictly speaking, it doesn't work without the start tag >. But My best practice is to write the closing tag and then write the class.

First write:

<div class=""></div>

Second write:

<div class="w-10"></div>

Solution 19:^[19]

I solved the problem only by deleting the space between the equal sign and and quote. So instead of writing className= "tailwind classes..." write className="tailwind classes...". I hope that this answer will help.

Solution 20:^[20]

Update VS Code

I had the same issue I just fixed it by updating VS Code.

Solution 21:^[21]

I disabled and re-enabled the plugin. Wait a bit for it to re-initialize. And it works.

Solution 22:^[22]

At first, write in your project npm install tailwindcss postcss-cli autoprefixer, Then write in your terminal npx tailwind init, at last write npm tailwind"postcss.config.js and then write in the file:

module.export = { plugins: [require('tailwindcss'), require('autoprefixer')]};

last step u can build your tailwindcss in packagein accordance with the package.json.

For more info u can visited this link.

Solution 23:^[23]

Make sure that you open the project from its root folder. I happened to me that there were multiple package.json files in the a different folder, the VS code plugin will be confused with tailwindcss path.

Just open the Explorer view and you should see one and only one package.json file and tailwindcss is listed as the dependencies.

Solution 24:^[24]

Had the same issue with Intellisense, the output in VSCode for the "TailWind CSS IntelliSense" had

[Error - 1:36:36 PM] Tailwind CSS: Cannot set property 'parent' of undefined
TypeError: Cannot set property 'parent' of undefined

This seemed to be coming from the postcss-nested plugin, however after reading a few other SO posts on the similar issue it actually came down to my setup.

The main project folder was failing to parse a file that existed inside a sub-project (td;lr. using a wordpress theme git repo that is build with the template as the root).

Since the original setup to process the TailWind wasn't needed, I noticed that the root project was TailWind v3, while the sub-project was TailWind v2. After removing the base package.json dependancies Intellisense kicked in picked up the [sub-project] tailwind config, postcss and tailwind version.

Not sure if that might be similar to your setup, but what is suggested is checking the package versions, and that your tailwind config files (if any) are setup right.

The moment you fix it, you should immediately be able to see in the Output tab for "TailWind CSS IntelliSense" something similar to the following....

Found Tailwind CSS config file: /.../tailwind.config.js
Loaded postcss v8.3.0: /.../node_modules/postcss
Loaded tailwindcss v2.2.0: /..../node_modules/tailwindcss

Hope there's something you can take away from this. :)

Solution 25:^[25]

Just go to the Tailwind CSS IntelliSense extension in Vs code and install the old version and reload it. It works.

Solution 26:^[26]

For React project with .tsx file, adding this works for me.

// .vscode/settings.json

{
  "tailwindCSS.includeLanguages": {
    "typescriptreact": "html"
  }
}

Credit: https://github.com/tailwindlabs/tailwindcss-intellisense/issues/72#issuecomment-674386396

Solution 27:^[27]

If you have a project with multiple tailwind.config.js files, TailwindCSS Intellisense will only load the first one it finds.

Unfortunately there is no solution yet (issue).

In my case, I have two projects with a tailwind.config.js in a monorepo.

Thus a workaround is to open only the project I am currently working on.

Solution 28:^[28]

hi,
I have the solution
first:
     download tailwindcss from node.js or (npm)
second:
     write in your project terminal in vscode
     npx tailwindcss init
     to will create tailwind.config.js
and download the tailwind css
intellisense plugin for vscode
and working!

Solution 29:^[29]

If you go to the Extensions view and then search for Tailwind CSS, make sure it is Enabled. Mine was installed but not enabled and that is why it was not working.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	wasabigeek
Solution 3	Tim Kelly
Solution 4	lejlun
Solution 5	bingglex
Solution 6	npcpratt
Solution 7	hahuaz
Solution 8
Solution 9	Daryl Wong
Solution 10
Solution 11	Inamul Hassan
Solution 12	Md Tanjir Mahabub
Solution 13	Johannes Muenichsdorfer
Solution 14	FireMonster
Solution 15	Piyush Pranjal
Solution 16	notapatch
Solution 17	iPhoenix_
Solution 18
Solution 19	lejlun
Solution 20	Ketan Iralepatil
Solution 21	Adib Haziq
Solution 22	Majid Hajibaba
Solution 23	Derek Liang
Solution 24	Guy Park
Solution 25	ankitkaushiks
Solution 26	Jirachai Uraijaree
Solution 27	Flo
Solution 28	Joher
Solution 29	Freddie

'My TailWind CSS Intellisense plugin just isn't working on my VSCode

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

This setting is good working for react.js application

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]