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

Question

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.

I'm also new to tailwind, but it is working for me. Are you pointing to a compiled version of `tailwind.css` in your html file? For me it's about 1MB. — RaelB, Apr 21 '20 at 12:25
No, I don't think I've been working with that file. How do I get it? — Daze, Apr 21 '20 at 13:02
Watch this video: https://tailwindcss.com/course/setting-up-tailwind-and-postcss/ — RaelB, Apr 21 '20 at 13:50
For me, I added the `syler.sass-indented` extension, and then Tailwind IntelliSense started working for me. — Nate Whittaker, Oct 10 '20 at 00:16
Anyone stumbling over the same issue of tailwind completion not happening in .erb files, see [Tailwind CSS autocomplete in VSCode with Ruby on Rails](https://medium.com/@spaquet/tailwind-css-autocomplete-in-vscode-with-ruby-on-rails-63a5fc24a1a4). It was the key for me. — Bob Walsh, Jan 07 '22 at 23:56

Ahmad · Answer 1 · 2020-10-12T13:16:42.817

102

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

edited Oct 12 '20 at 13:16

answered Aug 23 '20 at 16:47

Ahmad

1,497
2
9
16

2

May I ask if anyone knows why this works? (Yes, it worked for me too. Thank you @Ahmad!) – Carl von Blixen Feb 20 '21 at 09:12
I had to upgrade vscode version first, then this worked. – dhrumil barot Oct 10 '22 at 07:52

score 100 · Answer 2 · edited Aug 14 '21 at 13:57

100

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
}

edited Aug 14 '21 at 13:57

lejlun

4,140
2
15
31

answered Aug 13 '21 at 16:07

Zal

1,009
1
4
2

2

This has helped me after searching for answers for hours. – Klim Yadrintsev Jul 10 '22 at 18:16
1

This is the solution! Should be accepted answer! It gives you hinted description of the css which is added by each class too. – jacktim Feb 21 '23 at 17:11
1

The only thing needed to get autosuggestions to work was: "editor.quickSuggestions": { "strings": true } not sure why you include the other stuff? – Operator Apr 06 '23 at 13:39
This solution works for me! I was creating a new VS Code profile but it turns out that this config is missing in my setting.json. – Tri Dawn May 27 '23 at 06:20
1

This also worked for me, although my project didn't have any settings.json file, so created one. Thanks – abass.mahdavi Jun 15 '23 at 09:16
Thanks! This worked for me instead of the accepted answer. The accepted answer might be a prerequisite, but that alone didn't do it for me. – jlos Sep 02 '23 at 14:25

score 49 · Answer 3 · answered Oct 15 '20 at 00:09

49

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

answered Oct 15 '20 at 00:09

Tim Kelly

883
8
8

How to do this in macbook? – MagnusEffect Sep 17 '22 at 11:55
This shortcut is occupied on Macs by default. You can free it up by navigating to System Preferences -> Keyboard -> Shortcuts -> Input Sources and removing both check boxes – jessems Oct 21 '22 at 07:11

score 47 · Answer 4 · answered Dec 05 '20 at 14:47

47

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.

answered Dec 05 '20 at 14:47

wasabigeek

2,923
1
21
30

1

I searched tailwind intellisense in extention, then I found Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss), so I installed that. Thanks to this thread! – il0v3d0g Feb 08 '21 at 02:41
Thank you, I had my output hidden, this showed me to my issue. – rabbitt Jul 04 '21 at 12:12
THIS! Thank you. I deleted the last script in package.json and didn't remove the trailing comma. oops. – Dave Sep 17 '21 at 16:04
1

Answers like this one really upgrade you. It helps you debug the problem and help solving the problem in your own ways. In my case, I have to install [link](https://tailwindcss.com/docs/installation#install-tailwind-via-npm)tailwindcss via npm. I was using tailwindcss directly with npx and it looks like intellisense extension require npm install. – Myo Win Oct 14 '21 at 05:35
Yes works, usually it isn't if something broke in packages. Thanks – Aleksandr Skobeltcyn Jan 01 '22 at 16:03
I also searched tailwind intellisense and that gave me an error message that I needed VS Code version above ~1.52 to run it and I apparently had ~1.50. This led me to update VS Code. And it worked. – RK_97 Nov 02 '22 at 15:48
YES! This might be my problem! I got "The language client requires VS Code version ^1.67.0 but received version 1.66.1"... Let me give it a shot now and see – Robert O'Toole Dec 17 '22 at 13:09
Not the first time I get a problem with Tailwindcss intellisense and not the first time this answer helped me. I wish I could update multiple times! – Jérôme MEVEL Jul 11 '23 at 20:48

score 11 · Answer 5 · answered Dec 30 '20 at 09:17

11

for me..

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

It works now.

answered Dec 30 '20 at 09:17

bingglex

185
4
8

I did this, but didn't reinstall or reload. It worked! – Ian MacFarlane Jan 03 '21 at 15:48
This one worked for me (using CRA and Typescript), I have no idea why – GMaiolo Apr 21 '21 at 16:45

score 9 · Answer 6 · answered Feb 05 '21 at 01:23

9

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.

answered Feb 05 '21 at 01:23

npc-prat

129
2
6

For quick tests, I usually use the CDN version, so I don't really need the `tailwind.config.js`, but it seems the extension doesn't work without it. – akinuri Jul 28 '23 at 10:49

score 8 · Answer 7 · answered Jun 03 '21 at 02:51

8

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.

answered Jun 03 '21 at 02:51

hahuaz

173
2
4

1

This one was helpful for my case. – Shafi Aug 06 '22 at 18:54

score 7 · Answer 8 · answered Feb 08 '21 at 15:02

7

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.

answered Feb 08 '21 at 15:02

thanks, this work for me (tailwind, cra, typescript); to restart vscode use cntrl + shift + p > Developer: Reload Windows – D4ITON Feb 13 '22 at 13:37
Thanks, I was trying to get it working with JSP files. I had to go to this setting and add item: jsp, value: html. Then it sprang into life. – langauld Jul 14 '22 at 01:16

score 6 · Answer 9 · answered May 02 '22 at 12:30

6

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

answered May 02 '22 at 12:30

ankitkaushiks

119
1
3

For the older version ,toggle the uninstall option and choose the 2nd option. ( I installed version 0.7.5) – ankitkaushiks May 02 '22 at 12:32
yes is working, but can you tell me why the newer version doesn't work anymore? thanks for the answer – Laaouatni Anas Aug 05 '22 at 14:50

score 4 · Answer 10 · answered May 28 '22 at 15:31

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

score 3 · Answer 11 · answered Jun 21 '22 at 11:06

3

This is the solution for autosuggestion on typing. So you don't need to use space+ctrl or just space. In case anyone needs it.

editor.suggest.snippetsPreventQuickSuggestions: false

answered Jun 21 '22 at 11:06

sgoran

826
8
13

eCoder · Answer 12 · 2023-02-20T19:35:09.347

3

Edit your VSCode settings.json:

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": true
}

Sometimes is needed to restart vscode.

edited Feb 20 '23 at 19:35

answered Feb 14 '23 at 17:01

eCoder

63
6

score 2 · Answer 13 · answered Jan 27 '21 at 13:14

2

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

answered Jan 27 '21 at 13:14

Daryl Wong

2,023
5
28
61

score 2 · Answer 14 · answered Jun 04 '21 at 13:25

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"
},

score 2 · Answer 15 · answered Aug 28 '21 at 16:29

2

This setting is good working for react.js application

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

answered Aug 28 '21 at 16:29

Md Tanjir Mahabub

21
2

Thanks! Did did the trick for me in my Next.js project! – Bart Bergmans Feb 13 '22 at 11:48

score 2 · Answer 16 · edited Oct 13 '22 at 13:21

2

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

edited Oct 13 '22 at 13:21

Alauddin

47
1
1
8

answered Nov 02 '21 at 07:22

Adib Haziq

21
3

Sanan Ali · Answer 17 · 2021-03-27T13:32:53.307

1

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.

edited Mar 27 '21 at 13:32

answered Mar 27 '21 at 13:22

Sanan Ali

2,349
1
24
34

score 1 · Answer 18 · answered Jun 12 '21 at 12:24

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

score 1 · Answer 19 · answered Oct 22 '21 at 05:53

1

Update VS Code

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

answered Oct 22 '21 at 05:53

Ketan Iralepatil

21
5

score 1 · Answer 20 · edited Nov 02 '21 at 10:00

1

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.

edited Nov 02 '21 at 10:00

Majid Hajibaba

3,105
6
23
55

answered Nov 02 '21 at 07:40

Fanddi bayy

21
3

1

works for the react projects – viciousP Jan 18 '22 at 20:10

score 1 · Answer 21 · answered Nov 06 '21 at 13:09

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.

score 1 · Answer 22 · answered Dec 28 '21 at 06:32

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.

score 0 · Answer 23 · answered Mar 06 '21 at 22:48

0

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

answered Mar 06 '21 at 22:48

FireMonster

1

Please adda link to the extension: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion – theUtherSide May 27 '21 at 16:08

score 0 · Answer 24 · answered Jun 16 '21 at 15:33

0

Rails erb - Custom class name completion contexts

Add to settings (ctrl + shift + p)

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

See github issue reply

answered Jun 16 '21 at 15:33

notapatch

6,569
6
41
45

score 0 · Answer 25 · answered Aug 13 '21 at 04:11

0

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

Now everything works when I hit space after previous class.

answered Aug 13 '21 at 04:11

iPhoenix_

49
5

score 0 · Answer 26 · answered Aug 16 '21 at 08:33

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!

shingo.nakanishi · Answer 27 · 2021-08-21T10:40:29.090

0

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>

edited Aug 21 '21 at 10:40

answered Aug 21 '21 at 10:22

shingo.nakanishi

2,045
2
21
55

score 0 · Answer 28 · edited Aug 23 '21 at 09:21

0

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.

edited Aug 23 '21 at 09:21

lejlun

4,140
2
15
31

answered Aug 22 '21 at 18:13

Ionut Tomutiu

11
2

score 0 · Answer 29 · answered Feb 28 '22 at 05:48

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. :)

Antoine Nivet · Answer 30 · 2022-06-24T08:35:31.923

0

The extension HTML CSS Support extension is not the correct way to go. As specified in the official installation section of the detail page in the extension page in VSC.

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.

so adding a file (even empty) named tailwind.config.js or tailwind.config.cjs at the root of your app will make it work.

edited Jun 24 '22 at 08:35

answered Jun 23 '22 at 14:12

Antoine Nivet

40
6

https://tailwindcss.com/docs/configuration – Antoine Nivet Jan 12 '23 at 16:01

score 0 · Answer 31 · answered Jul 13 '22 at 16:44

My issue was with the tailwind.config.js. Since I followed the Tailwind installation step by step, I put the content as

content: ["./src/**/*.{html,js}"]

While I had no src folder, rather my html file was at the root. So I changed it to below and the IntelliSense started working.

content: ["/*.{html,js}"]

So just in case someone is making this silly mistake like me :)

score 0 · Answer 32 · answered Sep 06 '22 at 07:38

How to get it working with denoland's `Fresh` framework

Check that the extension is not loading by opening the OUTPUT tab of the console and verifying that the dropdown menu has an entry for Tailwind CSS IntelliSense.

If it does not figure there you need to make a blank tailwind.config.js file at the root directory. This file is completely redundant with Deno, but required by the extension.

If it still does not help, try other methods shown in this thread. With the extension loading latest version of it does work on with setup.

score 0 · Answer 33 · answered Sep 06 '22 at 14:02

0

I re-installed a new VSCode version and also unistalled and installed again Tailwind CSS IntelliSense extension, and it just started working!

answered Sep 06 '22 at 14:02

Hadis Sulejmani

71
1
5

Michiel Pater · Answer 34 · 2022-11-29T16:33:06.590

0

In my situation, switching to another file that uses CSS and then switching back answered the question.

It might take some time before it starts working after launching VSCode.

edited Nov 29 '22 at 16:33

answered Nov 29 '22 at 16:06

Michiel Pater

22,377
5
43
57

score 0 · Answer 35 · answered Dec 31 '22 at 20:36

0

If you are working on Windows Subsystem for Linux you might be getting an error similar to:

Tailwind CSS: Can't resolve //wsl$/foo/tailwind.config.js

Installing the WSL extension should fix this problem.

answered Dec 31 '22 at 20:36

Camilo

6,504
4
39
60

score 0 · Answer 36 · answered Feb 12 '23 at 21:52

0

Had the same issue. In my case I have a structure like this:

- Root
-- Client
-- Server

I'm using typescript within Client but I hadn't set compilerOptions.baseUrl in tsconfig.json;

After setting baseUrl to ./ in tsconfig.json, I magically started getting intellisense.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    ...
  }
}

answered Feb 12 '23 at 21:52

Darko

39
1
6

Sounds like you are solving a typescript problem, while the question is about intellisense – Moritz Ringler Feb 17 '23 at 13:12
Just sharing what worked for me in my use-case of having 2 different projects within the same directory whilst NOT being a mono repo – which is why I shared the context in which this worked out. – Darko Feb 19 '23 at 15:10

score 0 · Answer 37 · answered May 21 '23 at 11:52

According to the Troubleshooting section of https://github.com/tailwindlabs/tailwindcss-intellisense:

Make sure your VS Code settings aren’t causing your Tailwind config file to be hidden/ignored, for example via the files.exclude or files.watcherExclude settings.

This solved the issue for me.

score 0 · Answer 38 · answered Aug 13 '23 at 09:30

I tried most of the solution but what worked for me is this , just copy past the following , you can remove the iconthem if you want .

{
    "tailwindCSS.includeLanguages": {
        "html": "html",
        "javascript": "javascript",
        "css": "css"
    },
    "css.validate": false,
    "workbench.iconTheme": "file-icons-mac",
    "tailwindCSS.emmetCompletions": true,
    "editor.inlineSuggest.enabled": true,
    "editor.quickSuggestions": {
        "strings": true
    }


}

score -1 · Answer 39 · answered Apr 19 '21 at 15:37

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.

score -1 · Answer 40 · answered Jan 26 '22 at 09:51

-1

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.

answered Jan 26 '22 at 09:51

Freddie

908
1
12
24

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

40 Answers40

This setting is good working for react.js application

Update VS Code

Rails erb - Custom class name completion contexts

My best practice

How to get it working with denoland's `Fresh` framework

Linked

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

40 Answers40

This setting is good working for react.js application

Update VS Code

Rails erb - Custom class name completion contexts

My best practice

How to get it working with denoland's Fresh framework

Linked

How to get it working with denoland's `Fresh` framework