Tailwind 4 Intellisense autocomplete not reflecting @theme classes

[teemzero]

Tailwind v4.0.0
Tailwind CSS IntelliSense v0.14.1

Vite 6.0.5, Vue 3.5.13

NodeJS v20.16.0
Chrome
Windows

Reproduction repo:
https://github.com/teemzero/tw4_bug

Issue:
When I use ./assets/main.css instead of ./styles.css and I add a class in theme, or change a classname, Intellisense autocomplete doesn't pick up those changes in App.vue.
When I switch back to ./styles.css, any changes in theme are directly picked up by the autocompletion in App.vue.
This is very consistent behavior.
But.
There might be a lot more going down, as it took me a while to get to this reproducible situation, and during the process I came across many unexpected behaviors (that I haven't nailed down).
For now I see that the above situation doesn't apply to ./index.html, changes in theme classes are not reflected in autocomplete there, which I consider a bug.
You may wanna have an extra look at those neat detection heuristics 🙏thank you for the awesome work.

[thecrypticace]

Do you mean you're keeping both files around and expect changes to both sets of themes to show in IntelliSense? Or do you mean that one set of files should be covered by assets/main.css and the other should be covered by styles.css?

If you don't need both, remove one of the files from your project and it'll start working. The main problem here is we're basically detecting two "root" CSS files, they both cover all files, and only one of them wins when IntelliSense asks "which set of classes should I look at for this file".

If you remove either one of the files from the project and reload IntelliSense should start working.Alternatively, if you import one file into the other via @import and reload it should also start working.

[teemzero]

I'm using only one css file.
The css files are identical and the only point for having them both in the repo is to be able to switch between them easily for demo purposes (the import for styles.css is commented out in the repo).
So I use only one, or the other.
When using ./styles.css the autocompletion works, when using ./assets/main.css instead of styles.css, it doesn't, even if I delete the unused styles.css from the project entirely.
That's my point here, it works in the root but not in the assets folder, sorry if it wasn't clear from the bat.
Thank you.

[vladmiller]

@thecrypticace the documentation may need changes, because right now it still references the old .js format.

Ensure that you have a Tailwind config file in your workspace and that this is named tailwind.config.{js,cjs,mjs,ts,cts,mts}.

In my case, I have a monorepo and naming my file styles.css does not even work by default. Which I guess I kind of expected because how the hell would the extension know where my theme file is. I think with css-first approach there is no default config file name anymore, like we had before with tailwind.config.js.

---

@teemzero I was able to solve it by adding this to vscode settings. Also, for when the VSCode extensions misbehave, usually (not always :D), Restart Extension Host action fixes these issues.

"tailwindCSS.experimental.configFile": "../packages/web-components/styles.css"

[teemzero]

Nice one Vlad. 👍
Thanks, I'll use the experimental config file feature.
For restarting I tried Disable and then Enable the extension, that didn't help, but I'll look into 'Restart Extension Host'.

[vladmiller]

@teemzero cheers mate, hope it helps.