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

user_6791686 0
Viewed 20633

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?

tailwind-css visual-studio-code reactjs
10 Answers

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

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

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

View image of Tailwind settings

user_110623450

Edit your settings.json as below:

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

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

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

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

npx tailwindcss init

and it should start working.

user_67155420

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
user_85553980

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.

user_168068420

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

user_196665550

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,
user_90932470

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