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.

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. — I.M. Adil, Feb 01 '22 at 14:04
yeah... sure.. but I checked those things before posting this question... thank you soo much — H Nazmul Hassan, Feb 01 '22 at 14:12

score 8 · Answer 1 · edited Jul 08 '22 at 20:40

8

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

edited Jul 08 '22 at 20:40

H3AR7B3A7

4,366
2
14
37

answered Jul 07 '22 at 23:55

Imri Sagive

81
1
5

1

This is the answer – Kirk Strobeck Dec 18 '22 at 17:23

score 3 · Answer 2 · answered May 27 '22 at 20:12

3

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 }

answered May 27 '22 at 20:12

Barton Young

61
6

this worked for me, thanks! :) – jmdavalos Aug 11 '23 at 03:43

score 1 · Answer 3 · answered Feb 01 '22 at 12:53

1

Did you install the Tailwind CSS IntelliSense extension?

answered Feb 01 '22 at 12:53

A1exandr Belan

4,442
3
26
48

yeah... I have installed this extension... – H Nazmul Hassan Feb 01 '22 at 13:14
also not working IntelliSense for any library like react... – H Nazmul Hassan Feb 01 '22 at 13:15
Does IntelliSense work for anything at all? – A1exandr Belan Feb 01 '22 at 15:55
yes.. intellisense work for other things such as for python, for javascript, for CSS property name. but not working for Tailwindcss.. – H Nazmul Hassan Feb 01 '22 at 18:53
1

Does this answer your question? [My TailWind CSS Intellisense plugin just isn't working on my VSCode](https://stackoverflow.com/questions/61343447/my-tailwind-css-intellisense-plugin-just-isnt-working-on-my-vscode) – A1exandr Belan Feb 02 '22 at 13:14

score 1 · Answer 4 · answered Jun 14 '22 at 18:45

1

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

answered Jun 14 '22 at 18:45

Dujveq E

13
3

Herosimo Sribiko · Answer 5 · 2022-11-25T18:11:19.573

1

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:

edited Nov 25 '22 at 18:11

answered Oct 26 '22 at 05:49

Herosimo Sribiko

61
3

score 1 · Answer 6 · answered Nov 11 '22 at 09:22

1

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

answered Nov 11 '22 at 09:22

Huy Tran

11
1

score 1 · Answer 7 · answered Jan 09 '23 at 13:13

1

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.

answered Jan 09 '23 at 13:13

l3dger_0x

23
6

1

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](/help/how-to-answer). – Community Jan 09 '23 at 13:20

score 1 · Answer 8 · answered May 13 '23 at 18:48

1

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.

answered May 13 '23 at 18:48

Kushal

11
2

Tailwindcss Intellisense not working in VS Code

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

8 Answers8