Rainbow Tailwind Manager

A VSCode extension for managing Tailwind CSS v4 classes in Rainbow design system components.

Features

Class Detection: Identify Tailwind classes in selected JSX/TSX components
Hover Preview: See CSS output when hovering over classes
Sidebar Tree View: Display classes grouped by category (Layout, Spacing, Typography, etc.)
Class Management: Add, remove, and sort classes with commands
Autocomplete: IntelliSense for Tailwind classes with CSS preview
Rainbow Data Attributes: Recognize data-slot, data-variant, data-size attributes

Command	Description
`Rainbow: Show Class Manager`	Focus the class manager sidebar
`Rainbow: Add Class`	Add a class to the current element
`Rainbow: Remove Class`	Remove a class from the current element
`Rainbow: Sort Classes`	Sort classes in Tailwind's recommended order
`Rainbow: Canonicalize Classes`	Normalize and deduplicate classes
`Rainbow: Copy Classes to Clipboard`	Copy all classes from current element

Setting	Default	Description
`rainbow.sortOnSave`	`false`	Automatically sort classes when saving
`rainbow.canonicalizeOnSort`	`true`	Normalize classes when sorting
`rainbow.showCSSPreview`	`true`	Show CSS preview in hover tooltips
`rainbow.cssPath`	`""`	Path to main CSS file (auto-detected if empty)

# Install dependencies
npm install

# Build the extension
npm run build

# Watch for changes
npm run watch

# Run tests
npm test

MIT