Tailwind Variant Highlighter

[!CAUTION] Experimental. Use at your own risk.

Built with AI (Antigravity + mostly Claude Opus 4.5). I don't fully understand how it works. Expect bugs/quirks.

What is this?

A VS Code extension that adds color-coded highlighting to Tailwind CSS variant prefixes.

Before: You squint at dark:hover:focus:lg:disabled:bg-blue-500 trying to parse it.

After: Each variant prefix (dark:, hover:, focus:, etc.) gets its own distinct color, making the structure instantly visible.

Features

Configuration

All settings live under tailwindVariantHighlighter.* in your VS Code settings.

enabled

Toggle the extension on/off.

"tailwindVariantHighlighter.enabled": false

decorationStyle.borderRadius

Controls the rounded corners of the highlight box.

"tailwindVariantHighlighter.decorationStyle.borderRadius": "4px"

updateDelay

Milliseconds to wait before re-rendering decorations after you type. Lower = faster updates, higher = better performance on large files.

"tailwindVariantHighlighter.updateDelay": 200

showBackground

Toggle background highlighting on variant prefixes. Disable for a cleaner, text-color-only look.

"tailwindVariantHighlighter.showBackground": false

customVariantColors

Define colors for custom or plugin variants that aren't built-in.

"tailwindVariantHighlighter.customVariantColors": {
  "prose-headings": {
    "bg": "#f59e0b20",
    "color": "#f59e0b"
  },
  "@container": {
    "bg": "#06b6d420",
    "color": "#06b6d4"
  },
  "data-[state=open]": {
    "bg": "#22c55e20",
    "color": "#22c55e"
  }
}

Intuition: bg is the background highlight (use ~10-20% opacity for subtlety), color is the text color.

Theme Color Overrides

Want to change the color of a built-in variant? Use VS Code's workbench.colorCustomizations:

"workbench.colorCustomizations": {
  "tailwindVariantHighlighter.hoverColor": "#ff0000",
  "tailwindVariantHighlighter.hoverBackground": "#ff000020",
  "tailwindVariantHighlighter.darkColor": "#888888",
  "tailwindVariantHighlighter.smColor": "#00ff00"
}

Pattern: tailwindVariantHighlighter.<variant>Color for text, tailwindVariantHighlighter.<variant>Background for background.

Note: Hyphens in variant names become underscores (e.g., focus-within → focus_withinColor).

Credits

Parsing logic derived from Tailwind CSS IntelliSense by Tailwind Labs, Inc.

Files referenced:

• tailwindcss-language-service/src/util/find.ts
• tailwindcss-language-service/src/util/getVariantsFromClassName.ts
• tailwindcss-language-service/src/util/lexers.ts
• tailwindcss-language-service/src/util/segment.ts

Licensed under MIT.

License

MIT