TailwindCSS Class Enhancer

A VSCode extension that enhances your Tailwind CSS development experience with visual decorations and intelligent previews.

Features

🎨 Color Decorations

Visual underlines for all Tailwind color classes, making it easy to identify colors at a glance.

• Background colors: bg-blue-500, bg-red-600
• Text colors: text-gray-900, text-white
• Border colors: border-green-500, border-t-purple-500
• Ring colors: ring-blue-500, focus:ring-red-500
• Gradient stops: from-pink-500, via-yellow-500, to-purple-600
• Other colors: fill-red-500, stroke-blue-500, placeholder-gray-400

Supports all color formats: hex, rgb, hsl, oklch, oklab, lab, lch.

🌈 Gradient Preview

Hover over gradient classes to see a rich visual preview with:

• 200x60px gradient preview
• Gradient type and direction
• All related classes
• Generated CSS code

Supports:

• Linear gradients: bg-linear-to-r, bg-linear-45deg
• Radial gradients: bg-radial
• Conic gradients: bg-conic-0deg

🔧 Arbitrary Values

Full support for Tailwind's arbitrary value syntax:

<div class="bg-[#1da1f2] text-[rgb(255,0,0)] w-[100px] p-[17px]">
	Custom values with visual decorations
</div>

⚡ Smart Detection

• Position-aware class queries for accurate information
• Comprehensive color extraction from CSS
• Caching for optimal performance
• Support for modifiers: hover:, dark:, md:, etc.

🐛 Debug Mode

New debug hover feature for development and troubleshooting:

• Parser Output: See how class names are parsed into components
• Grouping Data: View categorization and grouping logic
• Decoration Output: Inspect applied decorations and styles
• Toggle Command: Easy enable/disable via command palette

Enable debug mode:

Cmd+Shift+P → "Toggle Debug Mode"

Or in settings:

{
	"tailwindHighlighter.debug.hoverInfo": true
}

See [Debug Hover Documentation] for details.

Requirements

• VSCode 1.80.0 or higher
• Tailwind CSS IntelliSense extension

Extension Settings

This extension contributes the following settings:

• tailwindClassEnhancer.highlightStyles.color.enabled: Enable/disable color decorations (default: true)
• tailwindClassEnhancer.highlightStyles.color.border: Border width for color underlines (default: "2px")
• tailwindClassEnhancer.scanner.debounceDelay: Delay before scanning after document changes (default: 300)
• tailwindClassEnhancer.supportedLanguages: File types to scan (default: ["html", "javascriptreact", "typescriptreact", "vue", "svelte"])

Usage

1. Install the extension
2. Open a file with Tailwind CSS classes
3. Color classes will automatically show colored underlines
4. Hover over gradient classes to see previews
5. Use Cmd/Ctrl + Shift + P → "Refresh Decorations" to manually refresh

Supported Languages

• HTML
• JavaScript/JSX
• TypeScript/TSX
• Vue
• Svelte

Documentation

For detailed documentation, see the agent-docs/ directory:

Development

Setup

# Install dependencies
pnpm install

# Build
pnpm run compile

# Watch mode
pnpm run watch

Testing

Press F5 to launch the extension in development mode. See [Testing Guide] for details.

Known Issues

• Gradient previews require both gradient type class and stop classes to be present
• Some complex arbitrary values may not be fully supported

Release Notes

See [CHANGELOG.md] for release history.

Contributing

Contributions are welcome! Please read the documentation in agent-docs/ to understand the architecture.

License

MIT

---

Enjoy enhanced Tailwind CSS development!