Rainbow Index for Visual Studio Code

Full editor support for the Rainbow Index CSS system: theme-aware IntelliSense, real color swatches, safe refactors, and a live view of your theme and elements — powered by the same engine your build uses, so what the editor says always matches what the build does.

Features

Diagnostics that understand your theme

Every class in your markup, clsx/cva/ri/safelist calls included, is validated against your project's theme:

• Unknown classes and variants get "did you mean" quick fixes — value typos included (bg-blu-500 → bg-blue-500).
• Classes that ri() conflict resolution would drop render faded, with a one-click Remove overridden class fix and a remove-all source action.
• The same conflict analysis runs inside merge calls (ri, twMerge, cn), per string literal — ri("px-2 px-4") is flagged, while ri("px-2", cond && "px-4"), a deliberate runtime override, stays quiet.
• Problems in your CSS entry's directives (@color, @font, …) are anchored to the exact offending at-rule, and VS Code's built-in CSS validator learns all Rainbow Index at-rules so it stops flagging them as unknown.

Completions and hovers

The finite completion universe for your theme — every item probe-verified against the real resolver: statics, theme-token expansions with palette swatches on color items, spacing and numeric templates as snippets, variant prefixes with what each one wraps, and the open-ended families (data-, group-, supports-, arbitrary […]) as snippets. Hover any class for its generated CSS, the meaning of each variant in the chain, and the resolved light/dark color. Works in class attributes, helper calls, and multi-line @apply lists — variant groups included.

Colors you can see and pick

VS Code's native color box appears on every color-bearing class (bg-brand-500, border-[#f80]) and on @color definition values in your stylesheet — generative chroma hue pairs resolve through the same OKLCH math as your emitted CSS variables, and dark definitions show their dark value. Dragging the picker on a class offers the nearest theme classes instead of raw hex, so edits stay inside your palette, alpha modifiers preserved.

Theme view

Your resolved theme as a browsable tree: colors as real light/dark swatches (generative palettes show the chroma/hue that build them, with the 500 stop as the example swatch), the type scale, fonts, spacing, breakpoints, radii, shadows, weights, and motion tokens. Click any token to copy its class name.

Elements view

Every element of the active document with its classes grouped by origin — inline tokens, programmatic helper calls, and the workspace CSS rules that target the element (with their @apply utilities resolved). The tree follows your cursor. Add classes from a theme-fed picker, remove them in place, or route a class through a stylesheet rule; rules and @apply tokens jump to their definitions.

Sort classes

Rainbow Index: Sort Classes orders every class attribute by the generated CSS's own cascade order. Unknown tokens keep their relative order at the front; variant groups sort as a unit and within their braces. Also available as the source.sortClasses.rainbowindex code action for editor.codeActionsOnSave.

Navigate and refactor

• Go to Definition on a custom utility, custom variant, or theme color jumps to its directive.
• Find References sweeps your workspace sources and @apply sites.
• Rename a custom utility and the directive, every usage, and every @apply site change together — with a completeness guard that aborts rather than half-renaming.
• Extract to class turns selected inline utilities into a named @utility in your CSS entry and swaps the selection for the new name.
• Collapse / expand variant groups rewrites hover:px-2 hover:py-1 ⇄ hover:{px-2 py-1}.

Theme audit

Rainbow Index: Audit Theme Usage sweeps the workspace and reports which declared tokens — colors and their stops, text sizes, weights, fonts, shadows, radii, motion, breakpoints — are never referenced.

Build integration

Tasks for rainbowindex build and watch, a Generate Types command producing rainbowindex-env.d.ts for ri() autocomplete (built from the same class universe the completions use), and Initialize Project for wiring Rainbow Index into a new workspace.

Getting started

1. Open a project that uses Rainbow Index — or run Rainbow Index: Initialize Project to set one up.
2. The extension finds your CSS entry (the stylesheet with your @color, @text, @utility, … directives) automatically. If it guesses wrong, run Rainbow Index: Pick CSS Entry.
3. The {} language status indicator always shows which Rainbow Index version is active and which entry drives it — with a warning and a picker when no entry is found.

A Get started with Rainbow Index walkthrough is available from the Welcome page.

If your workspace has its own rainbowindex installed, the extension prefers it over the bundled copy, so diagnostics always match the version your project actually builds with.

Commands

Settings

Settings react immediately — no reload needed.

Good to know

Element structure, stylesheet matching, and programmatic class detection are intentionally lightweight approximations tuned for responsiveness: the Elements view shows candidate rules and jumps you to them rather than replicating the full CSS cascade. Very large files (over 1 MB) are excluded from analysis, and the language status indicator will say so.