[Feature]: Provide VS Code Autocompletion for Tailwind's Generated CSS Variables

[ITenthusiasm]

So far, I've been amazed and very appreciative of Tailwind's abilities to provide autocomplete for its utility classes. And with the right VS Code configuration, you can accomplish even more!

I think the main limitation right now is autocompletion in the CSS files. According to the documentation, we should prefer var(--color-red-500) to theme("color.red.500") in v4. However, the reason that I use theme() is to get autocomplete for the tokens. (I can't memorize them all.) I don't see any autocompletion when I type var(--color-red-500).

Could TailwindCSS IntelliSense be updated to provide autocomplete for the CSS variables that it generates? (Ideally, this would display the value being used on hover as well, even if the value was only a reference to another CSS variable -- depending on how Tailwind was configured. Basically the same experience as hovering a Tailwind utility class.)

---

P.S. -- Bonus points if this could also work in JavaScript files. But I'm not as concerned about that one. Maybe Tailwind could expose a tailwindCSS.experimental.cssVarRegex for something like that -- similar to classRegex.

[Nagell]

+1

[loeffel-io]

+1 !

[loeffelr]

+1

[thecrypticace]

Gonna try getting a release out with this today 👍

P.S. -- Bonus points if this could also work in JavaScript files. But I'm not as concerned about that one. Maybe Tailwind could expose a tailwindCSS.experimental.cssVarRegex for something like that -- similar to classRegex.

It won't yet but I've got some plans for making this work in the future!

[ITenthusiasm]

Glorious! Thanks so much @thecrypticace!!! Excited to see this in action.

[thecrypticace]

v0.14.10 should be out!

Aaaannnnnd … I forgot to add support for hovers 🤦‍♂️. That'll probably be in the next release.

[loeffel-io]

Thank you very much, we really need this in js/ts files 🙏