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

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?

Solution 1:^[1]

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

Solution 2:^[2]

Edit your settings.json as below:

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

Solution 3:^[3]

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
}

Solution 4:^[4]

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

Solution 5:^[5]

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

npx tailwindcss init

and it should start working.

Solution 6:^[6]

You should configure the tailwindCSS.includeLanguages settings in your vscode settings as explayned here:

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Solution 7:^[7]

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

Solution 8:^[8]

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.

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	Tim Kelly
Solution 2	chankruze
Solution 3	Ganesh
Solution 4	Ashik
Solution 5	Otto Gutierrez
Solution 6	Emanuele Scarabattoli
Solution 7	saraf fath
Solution 8	Haroon Mughal

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]