[IntelliSense] Underline valid TaildwindCSS classes

[HummingMind]

Hello,
If possible, please add a feature to the VSCode extension to underline valid TailwindCSS classes. Similar to UnoCSS:

It's extremely helpdful to see right away if a class name maybe misspelled or if there may be a custom class on a particular html element.

Thank you!

[feledori]

Just wanted to open up a discussion about this! This would be such a nice addition it really helps distinguish tailwind classes from other classes as well as helping find wrongly spelled classes!

[ackvf]

I remember the pain when you tried to debug why a rule was not applying and having to mouse-hover all classes to see how and if they even translated at all.

I haven't realized how much I want it until I got used to it on a project with UnoCSS.

SOLUTION

So a dirty solution is to install UnoCSS extension https://marketplace.visualstudio.com/items?itemName=antfu.unocss and add an empty uno.config.ts file to the root of your repo and just put it in your global gitignore.

/**
 * This file is required for the VSCode extension.
 * https://marketplace.visualstudio.com/items?itemName=antfu.unocss
 * https://unocss.dev/integrations/vscode
 * https://github.com/unocss/unocss/discussions/4257
 */
export default {}

The downside is that you will get double hints now and it won't work with custom definitions, only the base tailwind, otherwise you would have to implment the uno.config.ts file.

Tailwind only (UnoCSS not installed)

UnoCSS only (notice that it is faster than tailwind extension)

Both