CODEWITHSUNDEEP
reactjsvisual-studio-codetailwind-css
jatin grover
jatin grover

Reputation: 486

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?

Upvotes: 30

Views: 64543

Answers (20)

Saptarsi Debnath
Saptarsi Debnath

Reputation: 1

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'.

Upvotes: 0

Vahid Seyidov
Vahid Seyidov

Reputation: 1

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.

Upvotes: 0

Domilson Firmino
Domilson Firmino

Reputation: 1

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

Upvotes: 0

ali
ali

Reputation: 56

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

Upvotes: 1

Avinash Chandra
Avinash Chandra

Reputation: 1

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

Upvotes: 0

Tran Dang Khoi
Tran Dang Khoi

Reputation: 11

Try this if you still can not fix this problem:

  1. Uninstall Tailwind CSS Intellisense from your VSCode and close it
  2. 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")
  3. Check if there're any folders called bradlc.vscode-tailwindcss, if yes then delete all of those
  4. Now, re-open your VSCode and install Tailwind CSS Intellisense once again

Upvotes: 0

PedroB
PedroB

Reputation: 77

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

Upvotes: 0

Arif Hossen
Arif Hossen

Reputation: 56

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.

Upvotes: 0

francis nwachukwu
francis nwachukwu

Reputation: 1

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

Upvotes: 0

Ehsan Samimi
Ehsan Samimi

Reputation: 236

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

Upvotes: 0

Moses Yashua
Moses Yashua

Reputation: 21

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

Upvotes: 2

Selcukusu
Selcukusu

Reputation: 454

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

Upvotes: 6

Sayef Reyadh
Sayef Reyadh

Reputation: 41

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,

Upvotes: 0

Haroon Mirza
Haroon Mirza

Reputation: 267

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.

Upvotes: 2

chankruze
chankruze

Reputation: 1166

Edit your settings.json as below:

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

Upvotes: 45

Ganesh
Ganesh

Reputation: 1919

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
}

Upvotes: 16

saraf fath
saraf fath

Reputation: 11

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

Upvotes: 1

Otto Gutierrez
Otto Gutierrez

Reputation: 487

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

npx tailwindcss init

and it should start working.

Upvotes: 6

Ashik
Ashik

Reputation: 3438

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

Upvotes: 5

Tim Kelly
Tim Kelly

Reputation: 1113

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

Upvotes: 29

Related Questions