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

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?

Answer 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

Answer 2

Edit your settings.json as below:
{
// other settings
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"html": "HTML"
},
"editor.quickSuggestions": {
"strings": true
}
}

Answer 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
}

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

Answer 5

Try to delete the "tailwind.config.js" and create it back again with
npx tailwindcss init
and it should start working.

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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,

Answer 10

Add to settings.json
You can open via
cmd + shift + p => Prefences: Open Settings (JSON)
"tailwindCSS.includeLanguages": {
"javascript": "javascript",
"javascriptreact": "javascriptreact",
"typescript": "typescript",
"typescriptreact": "typescriptreact",
}

Answer 11

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 tailwindcss#3.1.8) and then those ways that guys suggest work now

Answer 12

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