[IntelliSense] syntax highlighting for tailwind class names

[frank-swp]

Tailwind class names looking currently like a normal string in VS Code.

• this makes it difficult to distinguish from other class names / or normal strings in the html code
• you only know if if a tailwind class is a correct spelled if you hover it (or use a linter)

highlighting valid tailwind classname inside the a string with a special color could improve the usability.

current:

mockup:

I think this would make it easier for the eye to distinguish between tailwind styles and any other string in the code.

[ProPhycient5]

Yeah @frank-swp, this is a good idea for building a new extension on VScode editor. Basically, you expect the color to distinguish TailwindCSS library classname and customized classnames that are created by the developers. If such an extension is released, then it will definitely add the next level of aesthetic value to the JSX code.

[ruanswanepoel]

This would be pretty helpful.

Even being able to distinguish between tailwind classes and custom css classes would be helpful

[ProPhycient5]

Exactly @ruanswanepoel

[finnmerlett]

All the tailwind vscode extension needs to do is set textmate scopes on the identified tailwind classes, then you could set custom highlighting however you wanted

[schoero]

I created something today: vscode-tailwindcss-syntax-highlighting

It's still in the early stages, so I'd really appreciate any feedback or suggestions. Please feel free to try it out and let me know what you think 🙌