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?

I have the same problem, how did you manage to solve it ? – Harel Aug 03 '20 at 15:08 — Harel, Aug 03 '20 at 15:08

score 31 · Answer 1 · answered Oct 20 '21 at 13:39

31

Edit your settings.json as below:

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

answered Oct 20 '21 at 13:39

chankruze

669
11
16

score 25 · Answer 2 · answered Oct 15 '20 at 00:18

25

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 '20 at 00:18

Tim Kelly

883
8
8

1

`cmd + shift + p` to open JSON settings in VSCode. You can then add the suggested code there – thedanotto Mar 14 '22 at 07:06
It only works when I press `ctrl + space` but now I'm wondering why It doesn't work normally – youssef jallouli Jun 30 '22 at 01:22

score 11 · Answer 3 · answered Oct 02 '21 at 05:39

11

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 02 '21 at 05:39

Ganesh

1,820
2
20
40

score 5 · Answer 4 · answered Oct 17 '20 at 15:12

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 '20 at 15:12

Ashik

2,888
8
28
53

score 4 · Answer 5 · answered Jan 12 '21 at 07:20

4

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

npx tailwindcss init

and it should start working.

answered Jan 12 '21 at 07:20

Otto Gutierrez

447
2
5
15

score 2 · Answer 6 · answered Jul 23 '22 at 12:44

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

score 1 · Answer 7 · answered Sep 18 '21 at 14:07

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 '21 at 14:07

saraf fath

11
1

score 1 · Answer 8 · answered Feb 20 '22 at 08:46

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.

score 1 · Answer 9 · answered Aug 01 '22 at 13:02

1

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

answered Aug 01 '22 at 13:02

Moses Yashua

11
1

score 0 · Answer 10 · answered Jul 06 '22 at 08:24

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,

score 0 · Answer 11 · answered Oct 28 '22 at 07:46

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

score 0 · Answer 12 · answered Jan 23 '23 at 16:30

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

score 0 · Answer 13 · answered Jul 26 '23 at 08:36

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 '23 at 08:36

Arif Hossen

18
1
3

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

13 Answers13

Linked