⚠️ Deprecation notice: I am no longer maintaining this extension, since I myself am no longer using VSCode. Even before, I have used different strategies to deal with long class names. My favourite way was this extension, that let's you fold them whenever you are not working on styling.
🔌 Shameless plug: I have been devoloping this browser extension lately, that lets you organise and manage you AI prompts. I'd be thrilled if you checked it out!
An extension targeted at users of atomic css libraries (like tailwind-css) to make it easier to visually distinguish individual class names.
Does only one thing: Colors your class names dynamically with rainbow colors.
Works with:
- html
- jsx
- tsx
- svelte
- astro
Please open an issue if you want/need other languages supported.
This extension contributes the following settings:
classnamesRainbow.colorIntensity: set color intesity of the rainbow from 1 to 10, default: 5classnamesRainbow.minimumClassListLength: set the minimum length for class lists for the extension to take effect from 1 to 20, default: 1
Multilined class names are not yet supported.
Conditional class names within template literals are not yet supported.
Initial release