Doesn't work for TSX files

[arimendelow]

When using TypeScript with React, this plugin doesn't work. How can I configure it to look at .tsx files?

[lednhatkhanh]

How did you solve this?

[arimendelow]

Turns out it’s already got support for it, I’m not sure why it wasn’t working originally but soon after I posted this it started to work.

[or2008]

just installed and it doesn't work for me, lets see if this comment fixes it :)

[Manubi]

doesn't work for me either in .tsx only if I write "class" instead of "className" I get the autosuggest...

[arimendelow]

That's weird, it should work without any configuration. I'm still unsure why it didn't for me initially.

[swyxio]

same - it didnt work on tsx originally, then i panicked and clicked around and now it works

[bentruyman]

I also ran into this. Not sure if it's anything TSX-related (but it was failing in TSX files for me). But to fix it I simply created a tailwind.config.js file in my project.

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
};

It seems a config file is what enables this extension in a project.

[exoer]

In vscode - extensions - Tailwin CSS Intellisense. Click on the settings button ("manage").

Find Tailwind CSS - Include languages
Click 'edit in settings.json'

add
"tailwindCSS.includeLanguages": { "plaintext": "javascript" }

[b-groeneveld]

I've added

"tailwindCSS.includeLanguages": { "typescriptreact": "html" },

And restarted vscode and it was good to go

[oxyian-dev]

I've added

"tailwindCSS.includeLanguages": { "typescriptreact": "html" },

And restarted vscode and it was good to go

Super its working for me

[khalidahmada]

You can add this in user settings

"tailwindCSS.includeLanguages": { "typescript": "javascript", "typescriptreact": "javascript" }

[SHAGGYER]

doesnt work with custom webpack babel typescript react

[avxkim]

@khalidahmada this what it made working for me in Nuxt 3 + TS

[paulwongx]

You can add this in user settings

"tailwindCSS.includeLanguages": { "typescript": "javascript", "typescriptreact": "javascript" }

@khalidahmada
Can you explain what this is doing? Someone above suggested "typescriptreact": "html" Why typescriptreact: "javascript"?

[Manubi]

You can add this in user settings
"tailwindCSS.includeLanguages": { "typescript": "javascript", "typescriptreact": "javascript" }

@khalidahmada Can you explain what this is doing? Someone above suggested "typescriptreact": "html" Why typescriptreact: "javascript"?

You can find more information here:
changelog

package.json

readme

[hamzatalha77]

just go to tailwind.config.js and add tsx in the model like this:
/** @type {import('tailwindcss').Config} /
module.exports = {
content: ['./src/**/.{html,js,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
and will works for you ^^

[arsalanmohseni]

Use this for both jsx and tsx(my config):

"tailwindCSS.includeLanguages": {
        "typescriptreact": "html",
        "javascriptreact": "html"
 }