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.

I have installed TailwindCSS correctly (followed docs). The issue with the extension persists after a proper installation of any version of TailwindCSS, even though the installation was successful and fully functional:

In TailwindCSS v3, I created and properly configured the tailwind.config.js.
In TailwindCSS v4, without any JS file, I used the CSS-first approach with @import "tailwindcss"; in my main CSS file.

So TailwindCSS itself works fine, but the VSCode TailwindCSS IntelliSense extension does not.

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
– RaelB, Commented Apr 21, 2020 at 12:25
No, I don't think I've been working with that file. How do I get it? — Daze
– Daze, Commented Apr 21, 2020 at 13:02
For me, I added the syler.sass-indented extension, and then Tailwind IntelliSense started working for me. — Nate Whittaker
– Nate Whittaker, Commented Oct 10, 2020 at 0: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. It was the key for me. — Bob Walsh
– Bob Walsh, Commented Jan 7, 2022 at 23:56

lejlun · Accepted Answer · 2021-08-14 13:57:20Z

194

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, 2021 at 13:57

lejlun

4,4312 gold badges18 silver badges31 bronze badges

answered Aug 13, 2021 at 16:07

Zal

1,9171 gold badge7 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

jacktim Over a year ago

This gives you hinted description of the css which is added by each class too.

Operator Over a year ago

The only thing needed to get autosuggestions to work was: "editor.quickSuggestions": { "strings": true } not sure why you include the other stuff?

abass.mahdavi Over a year ago

This also worked for me, although my project didn't have any settings.json file, so created one. Thanks

collimarco Over a year ago

This no longer works (at least for me)

John Parlato Nov 6 at 0:51

Where is the Settings.json file ?

|

Ahmad · Accepted Answer · 2020-10-12 13:16:42Z

119

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, 2020 at 13:16

answered Aug 23, 2020 at 16:47

Ahmad

1,7052 gold badges12 silver badges18 bronze badges

5 Comments

Carl von Blixen Over a year ago

May I ask if anyone knows why this works? 🤔 (Yes, it worked for me too. Thank you @Ahmad!)

dhrumil barot Over a year ago

I had to upgrade vscode version first, then this worked.

Dev Over a year ago

it worked though I had uninstall and reinstall this HTML CSS Support plugin. Odd.

rozsazoltan Nov 4 at 9:16

This does not include the new colors and other utilities that can be generated by a custom TailwindCSS configuration. The official extension automatically builds all of these by interpreting the configuration of the given project: stackoverflow.com/a/79808707/15167500

Yousef Roshandel Nov 18 at 8:38

I had this extension installed already, but after disabling it, the Tailwind extension is working again

wasabigeek · Accepted Answer · 2020-12-05 14:47:37Z

71

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 5, 2020 at 14:47

wasabigeek

3,2521 gold badge26 silver badges30 bronze badges

12 Comments

il0v3d0g Over a year ago

I searched tailwind intellisense in extention, then I found Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss), so I installed that. Thanks to this thread!

rabbitt Over a year ago

Thank you, I had my output hidden, this showed me to my issue.

Dave Over a year ago

THIS! Thank you. I deleted the last script in package.json and didn't remove the trailing comma. oops.

Myo Win Over a year ago

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 linktailwindcss via npm. I was using tailwindcss directly with npx and it looks like intellisense extension require npm install.

bleeckerj Apr 7 at 4:53

This helped me as the output indicated an error that was easily corrected — it couldn't find the tailwind.config.js file.

|

Tim Kelly · Accepted Answer · 2020-10-15 00:09:26Z

65

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, 2020 at 0:09

Tim Kelly

1,1239 silver badges9 bronze badges

2 Comments

MagnusEffect Over a year ago

How to do this in macbook?

jessems Over a year ago

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

hahuaz · Accepted Answer · 2021-06-03 02:51:10Z

18

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 3, 2021 at 2:51

hahuaz

4434 silver badges7 bronze badges

3 Comments

Luke Over a year ago

This was what worked for me. I only had a tailwind.config.ts file but this added the .js one and it now works.

Khalboy Nov 9 at 17:43

why doesn't ts files work?

rozsazoltan Nov 4 at 9:17

If the configuration file is located in a non-standard location, or if in v4 you want to use it without a tailwind.config.js, you may need to specify the correct path to the new CSS file - but you don't need an empty tailwind.config.js: stackoverflow.com/a/79808707/15167500 (second part)

eCoder · Accepted Answer · 2023-02-20 19:35:09Z

16

Edit your VSCode settings.json:

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

Sometimes is needed to restart vscode.

edited Feb 20, 2023 at 19:35

answered Feb 14, 2023 at 17:01

eCoder

1931 silver badge7 bronze badges

Comments

bingglex · Accepted Answer · 2020-12-30 09:17:45Z

12

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, 2020 at 9:17

bingglex

3256 silver badges8 bronze badges

2 Comments

Ian MacFarlane Over a year ago

I did this, but didn't reinstall or reload. It worked!

GMaiolo Over a year ago

This one worked for me (using CRA and Typescript), I have no idea why

pratv · Accepted Answer · 2021-02-05 01:23:05Z

12

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 5, 2021 at 1:23

pratv

3463 silver badges9 bronze badges

2 Comments

akinuri Over a year ago

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.

Mahesh Over a year ago

Weirdly, worked like a charm.

ankitkaushiks · Accepted Answer · 2022-05-02 12:30:25Z

11

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

answered May 2, 2022 at 12:30

ankitkaushiks

3072 silver badges5 bronze badges

3 Comments

ankitkaushiks Over a year ago

For the older version ,toggle the uninstall option and choose the 2nd option. ( I installed version 0.7.5)

Laaouatni Anas Over a year ago

yes is working, but can you tell me why the newer version doesn't work anymore? thanks for the answer

TheBigFriezy Feb 6 at 2:53

i had to install PostCSS Language Support extension to stop the warnings

user13172816 · Accepted Answer · 2021-02-08 15:02:03Z

10

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 8, 2021 at 15:02

user13172816

2 Comments

dalthonmh Over a year ago

thanks, this work for me (tailwind, cra, typescript); to restart vscode use cntrl + shift + p > Developer: Reload Windows

langauld Over a year ago

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.

Jirachai Uraijaree · Accepted Answer · 2022-05-28 15:31:51Z

6

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

answered May 28, 2022 at 15:31

Jirachai Uraijaree

1861 silver badge6 bronze badges

Comments

Piyush Pranjal · Accepted Answer · 2021-06-04 13:25:46Z

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

Chris Catignani · Accepted Answer · 2024-04-30 21:48:14Z

4

I'm Using React via Vite, I just installed the Tailwind CSS IntelliSense extension and added this to my vscode settings.json to make it suggest strings:

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

edited Apr 30, 2024 at 21:48

Chris Catignani

5,30819 gold badges46 silver badges54 bronze badges

answered Apr 27, 2024 at 8:06

Yaniv Avraham

592 bronze badges

Comments

sgoran · Accepted Answer · 2022-06-21 11:06:17Z

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, 2022 at 11:06

sgoran

9868 silver badges13 bronze badges

Comments

Daryl Wong · Accepted Answer · 2021-01-27 13:14:15Z

2

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

answered Jan 27, 2021 at 13:14

Daryl Wong

2,4916 gold badges40 silver badges80 bronze badges

Comments

Md Tanjir Mahabub · Accepted Answer · 2021-08-28 16:29:41Z

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, 2021 at 16:29

Md Tanjir Mahabub

213 bronze badges

1 Comment

Bart Bergmans Over a year ago

Thanks! Did did the trick for me in my Next.js project!

Johannes Muenichsdorfer · Accepted Answer · 2021-11-06 13:09:25Z

2

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.

answered Nov 6, 2021 at 13:09

Johannes Muenichsdorfer

3883 silver badges14 bronze badges

Comments

Antoine Nivet · Accepted Answer · 2022-06-24 08:35:31Z

2

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, 2022 at 8:35

answered Jun 23, 2022 at 14:12

Antoine Nivet

607 bronze badges

2 Comments

Antoine Nivet Over a year ago

tailwindcss.com/docs/configuration

Antoine Nivet Over a year ago

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

Alauddin · Accepted Answer · 2022-10-13 13:21:55Z

2

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

edited Oct 13, 2022 at 13:21

Alauddin

591 gold badge1 silver badge8 bronze badges

answered Nov 2, 2021 at 7:22

Adib Haziq

213 bronze badges

Comments

FireMonster · Accepted Answer · 2021-03-06 22:48:00Z

1

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

answered Mar 6, 2021 at 22:48

FireMonster

111 bronze badge

1 Comment

theUtherSide Over a year ago

Please adda link to the extension: marketplace.visualstudio.com/…

Sanan Ali · Accepted Answer · 2021-03-27 13:32:53Z

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, 2021 at 13:32

answered Mar 27, 2021 at 13:22

Sanan Ali

3,5102 gold badges33 silver badges44 bronze badges

1 Comment

rozsazoltan Nov 4 at 9:17

If the configuration file is located in a non-standard location, or if in v4 you want to use it without a tailwind.config.js, you may need to specify the correct path to the new CSS file - but you don't need an empty tailwind.config.js: stackoverflow.com/a/79808707/15167500 (second part)

Inamul Hassan · Accepted Answer · 2021-06-12 12:24:47Z

1

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

answered Jun 12, 2021 at 12:24

Inamul Hassan

1481 gold badge2 silver badges11 bronze badges

Comments

Majid Hajibaba · Accepted Answer · 2021-11-02 10:00:33Z

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 2, 2021 at 10:00

Majid Hajibaba

3,2806 gold badges29 silver badges59 bronze badges

answered Nov 2, 2021 at 7:40

Fanddi bayy

214 bronze badges

1 Comment

rozsazoltan Nov 4 at 9:17

If the configuration file is located in a non-standard location, or if in v4 you want to use it without a tailwind.config.js, you may need to specify the correct path to the new CSS file - but you don't need an empty tailwind.config.js: stackoverflow.com/a/79808707/15167500 (second part)

Derek Liang · Accepted Answer · 2021-12-28 06:32:33Z

1

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.

answered Dec 28, 2021 at 6:32

Derek Liang

1,2221 gold badge16 silver badges23 bronze badges

Comments

bart-kosmala · Accepted Answer · 2022-09-06 07:38:22Z

1

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.

answered Sep 6, 2022 at 7:38

bart-kosmala

9811 gold badge13 silver badges23 bronze badges

Comments

Aphize_ · Accepted Answer · 2023-05-21 11:52:37Z

1

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.

answered May 21, 2023 at 11:52

Aphize_

3152 silver badges6 bronze badges

Comments

Manishyadav · Accepted Answer · 2023-08-13 09:30:51Z

1

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
    }


}

answered Aug 13, 2023 at 9:30

Manishyadav

1,8562 gold badges13 silver badges28 bronze badges

Comments

Johnson Fashanu · Accepted Answer · 2023-10-13 01:15:00Z

1

You can check your vscode extensions if tailwind was enabled.

Due to some settings on my vscode i realised tailwind intellisence was disabled. Had to enabled it and that fixed the problem.

answered Oct 13, 2023 at 1:15

Johnson Fashanu

1,16610 silver badges8 bronze badges

Comments

Caleb Olojo · Accepted Answer · 2024-08-07 16:34:35Z

1

IF USING TYPESCRIPT

In my case, there was a linting error in my tailwind.config.ts file which for some reason was the cause. Clear out any linting errors and it should working again. Goodluck!

answered Aug 7, 2024 at 16:34

Caleb Olojo

313 bronze badges

Comments

Revansiddha Parit · Accepted Answer · 2025-02-18 09:05:33Z

1

If you are working on react app, you need to create tailwind config file in your root directory as tailwind.config.js and add following content and then restart your VS code, it will work.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

answered Feb 18 at 9:05

Revansiddha Parit

1511 silver badge6 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS IntelliSense plugin just isn't working on my VSCode

51 Answers 51

10 Comments

5 Comments

12 Comments

2 Comments

3 Comments

Comments

2 Comments

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

This setting is good working for react.js application

1 Comment

Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

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

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

51 Answers 51

10 Comments

5 Comments

12 Comments

2 Comments

3 Comments

Comments

2 Comments

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

This setting is good working for react.js application

1 Comment

Comments

2 Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

How to get it working with denoland's Fresh framework

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related

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