Tailwind CSS IntelliSense does not provide suggestions in a ReactJS project?

Question

I created a ReactJS project using create-react-project command. I npm installed tailwindcss and created a tailwind.config.js file.

Now to make my life easier I also installed an extension called Tailwind CSS IntelliSense and reloaded VSCode. The extension still does not give suggestions in my JavaScript files.

At first, i thought it is maybe because it works only with html extensions or that the reactjs files uses className for adding CSS classes as class keyword is reserved. So, I tried to edit index.html file but not suggestions in HTML files as well.

Please tell what else can I tryout?

Create React App was one of the key tools for getting a React project up-and-running in 2017-2021, it is now in long-term stasis and we recommend that you migrate to one of React frameworks documented on Start a New React Project. - See more here: How to install React with TailwindCSS v4 — rozsazoltan
– rozsazoltan, Commented Mar 30 at 19:53

chankruze · Accepted Answer · 2021-10-20 13:39:17Z

52

Edit your settings.json as below:

{
  // other settings
  "tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

answered Oct 20, 2021 at 13:39

chankruze

1,19615 silver badges22 bronze badges

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

1 Comment

Eric B Jun 24 at 7:16

This didn't work for me because I was using typescript. If you're using typescript also add "typescript": "typescript" under the javascript property

Tim Kelly · Accepted Answer · 2020-10-15 00:18:55Z

30

Here's how to get Tailwind Intellisense to work with React files

Go to Tailwind CSS settings and add Javascript support "tailwindCSS.includeLanguages": { "plaintext": "javascript" }
Reload vscode

If this doesn't fix things, try using ctrl + space before adding a class name.

View image of Tailwind settings

answered Oct 15, 2020 at 0:18

Tim Kelly

1,1239 silver badges9 bronze badges

2 Comments

thedanotto Over a year ago

cmd + shift + p to open JSON settings in VSCode. You can then add the suggested code there

youssef jallouli Over a year ago

It only works when I press ctrl + space but now I'm wondering why It doesn't work normally

Ganesh · Accepted Answer · 2021-10-02 05:39:12Z

17

I faced this issue even after configuring tailwindCSS.includeLanguages settings.

So make sure you configure the below settings as well to allow suggestions inside a string.

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

answered Oct 2, 2021 at 5:39

Ganesh

1,9192 gold badges23 silver badges42 bronze badges

1 Comment

Tony S. Over a year ago

I had been having issues with the Tailwind Intellisense for a while now in VS code. The combination I used was a combination of chancruze's answer above AND this answer adding the quickSuggestions to turn strings on (true). Now it works perfectly.

Hieu D · Accepted Answer · 2025-05-28 19:22:16Z

7

Add to settings.json

You can open via

cmd + shift + p => Prefences: Open Settings (JSON)

"tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "javascriptreact": "javascript",
    "typescript": "typescript",
    "typescriptreact": "typescript",
}

edited May 28 at 19:22

Hieu D

33 bronze badges

answered Jul 23, 2022 at 12:44

Selcukusu

5046 silver badges13 bronze badges

1 Comment

ttt Over a year ago

The typescript part did it for me.

Otto Gutierrez · Accepted Answer · 2021-01-12 07:20:18Z

6

Try to delete the "tailwind.config.js" and create it back again with

npx tailwindcss init

and it should start working.

answered Jan 12, 2021 at 7:20

Otto Gutierrez

4872 gold badges7 silver badges15 bronze badges

1 Comment

Mehdi Faraji Over a year ago

This solution worked for me, I did init nextjs app with the command npx create-next-app@latest but tailwindcss intellisense had a problem for some reason. Had to init tailwindcss again for intellisense to work.

Ashik · Accepted Answer · 2020-10-17 15:12:16Z

5

Add this at the end of your setting.json file in order to get IntelliSense on both HTML and js file

"tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  },

answered Oct 17, 2020 at 15:12

Ashik

3,50812 gold badges41 silver badges65 bronze badges

Comments

Moses Yashua · Accepted Answer · 2022-08-01 13:02:08Z

3

I had the same issue. I uninstalled Tailwind CSS IntelliSense, then reinstalled it back. And the problem was solved.

answered Aug 1, 2022 at 13:02

Moses Yashua

311 bronze badge

1 Comment

rozsazoltan Mar 30 at 19:50

Not working for me.

Haroon Mirza · Accepted Answer · 2022-02-20 08:46:30Z

2

You have to include the files, in which you want to work with Tailwind CSS in your tailwind.config.js file. You can replace:

content: [],

with

content: ["*"],

It will include all files in your project. Save it and now the Tailwind CSS IntelliSense will popup the suggestions.

answered Feb 20, 2022 at 8:46

Haroon Mirza

2672 silver badges9 bronze badges

1 Comment

rozsazoltan Mar 30 at 19:50

Not recommended. In v3, only declare the paths that are actually used to preserve performance.

saraf fath · Accepted Answer · 2021-09-18 14:07:43Z

1

Both combined worked for me.

   "tailwindCSS.includeLanguages": {
        "javascript": "javascript",
        "html": "HTML"
      },

and

Try to delete the "tailwind.config.js" and create it back again with

npx tailwindcss init

answered Sep 18, 2021 at 14:07

saraf fath

111 bronze badge

Comments

ali · Accepted Answer · 2023-12-16 12:27:32Z

1

according to Tailwind CSS IntelliSense extension details page:

editor.quickSuggestions

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": "on" }

edited Dec 16, 2023 at 12:27

answered Dec 16, 2023 at 12:22

ali

566 bronze badges

Comments

Sayef Reyadh · Accepted Answer · 2022-07-06 08:24:15Z

0

Placed the following snippit in VSCode’s settings.json file.

"tailwindCSS.emmetCompletions": true, // remove this line if you don't use Emmet
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
   "strings": true
},
"css.validate": false,

answered Jul 6, 2022 at 8:24

Sayef Reyadh

415 bronze badges

Comments

Ehsan Samimi · Accepted Answer · 2022-10-28 07:46:42Z

0

The last version of tailwindcss for this time is 3.2.1 and it seems this version is not matched with the last version of vsCode or IntelliJ IDEA so I downgraded tailwind to 3.1.8 (npm i [email protected]) and then those ways that guys suggest work now

answered Oct 28, 2022 at 7:46

Ehsan Samimi

2363 silver badges7 bronze badges

Comments

francis nwachukwu · Accepted Answer · 2023-01-23 16:30:00Z

0

I added these lines of code but it did not work. However, updating my vscode to the latest version did the trick for me.

    "tailwindCSS.includeLanguages": { "plaintext": "javascript" },
    "tailwindCSS.emmetCompletions": true,
    "editor.inlineSuggest.enabled": true,
    "editor.quickSuggestions": {
        "strings": true
    },
    "css.validate": false,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

answered Jan 23, 2023 at 16:30

francis nwachukwu

1

Comments

Arif Hossen · Accepted Answer · 2023-07-26 08:36:10Z

0

I had the same issue I fixed by just creating a file in the root folder in my project named tailwind.config.js, then it was working fine.

answered Jul 26, 2023 at 8:36

Arif Hossen

661 silver badge5 bronze badges

Comments

PedroB · Accepted Answer · 2023-10-05 19:14:44Z

0

If it helps, my scenario is that I'm using WSL to "store" my projects but my VS code was installed in my windows. What I did was open the WSL prompt, navigate to the project folder and run code .. This is what worked for me and I was struggled on that for a few days

answered Oct 5, 2023 at 19:14

PedroB

779 bronze badges

Comments

Tran Dang Khoi · Accepted Answer · 2023-10-29 15:08:27Z

0

Try this if you still can not fix this problem:

Uninstall Tailwind CSS Intellisense from your VSCode and close it
Go to where your vscode exntensions are stored, mine is "C:\Users\Admin.vscode\extensions" (You can open this folder by pressing Ctrl + Shift + P in VSCode, and then search for "Extensions: Open Extensions Folder")
Check if there're any folders called bradlc.vscode-tailwindcss, if yes then delete all of those
Now, re-open your VSCode and install Tailwind CSS Intellisense once again

edited Oct 29, 2023 at 15:08

answered Sep 21, 2023 at 14:52

Tran Dang Khoi

511 silver badge3 bronze badges

3 Comments

phuocantd Over a year ago

how to fix it on macos?

Tran Dang Khoi Over a year ago

It's the same on macos, you will have to find the directory leading to where the vscode extensions are stored, on macOS it's ~/.vscode/extensions. You can open that folder by using this shortcut in VSCode: Ctrl + Shift + P. And then search for "Extensions: Open Extensions Folder"

rozsazoltan Mar 30 at 19:48

Not working for me.

Avinash Chandra · Accepted Answer · 2023-11-30 17:11:06Z

0

After trying everything mentioned above, I simply updated my VS Code, which fixed the problem.

answered Nov 30, 2023 at 17:11

Avinash Chandra

1

Comments

Domilson Firmino · Accepted Answer · 2024-01-11 20:32:03Z

0

To me I added; content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}', ] Inside the content and it started working fine after that, I used vite to create my react aplication

edited Jan 11, 2024 at 20:32

answered Jan 11, 2024 at 20:30

Domilson Firmino

11 bronze badge

Comments

Vahid Seyidov · Accepted Answer · 2024-01-24 05:31:23Z

0

Some extensions can cause such issues

I ran into the same issue where Quick Suggestions stopped working after installing the Explorer Exclude extension. Disabling the extension resolved the problem, suggesting potential conflicts between Quick Suggestions and Explorer Exclude.

edited Jan 24, 2024 at 5:31

answered Jan 24, 2024 at 5:30

Vahid Seyidov

13 bronze badges

Comments

Saptarsi Debnath · Accepted Answer · 2024-06-23 21:46:09Z

0

In my case in tailwind.config.cjs was in "export default({})" which I replaced with "module.exports = {}". In the output of VScode, it was showing that Taiwind CSS IntelliSense was having a problem with ES6 modules. After doing "module.exports" Taiwind CSS IntelliSense was providing auto suggestions for className s'.

answered Jun 23, 2024 at 21:46

Saptarsi Debnath

1

Comments

Fedor · Accepted Answer · 2025-03-31 10:34:46Z

0

User setting UI

Using Ctrl+shit+p and Preference: User Settin(UI). In the setting under user tab checking the Tailwind CSS:Emment Completions solved it for me.

Not important for this but for safer side I was working with Vite + React and added tailwind at later point of the project.

edited Mar 31 at 10:34

Fedor

24.7k45 gold badges59 silver badges188 bronze badges

answered Mar 30 at 11:54

Venu Soganadgi

12 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS IntelliSense does not provide suggestions in a ReactJS project?

21 Answers 21

1 Comment

2 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Some extensions can cause such issues

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

21 Answers 21

1 Comment

2 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Some extensions can cause such issues

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related