Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Tailwind RainbowNew to Visual Studio Code? Get it now.
Tailwind Rainbow

Tailwind Rainbow

Philip Schmidt

|
1,351 installs
| (5) | Free
Syntax highlighting for Tailwind CSS classes with customizable prefix-based coloring themes
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tailwind Rainbow

A VS Code extension that provides syntax highlighting for Tailwind CSS classes with customizable coloring themes.

Features

  • 🟣 Prefix-based coloring: Colors Tailwind prefixes (hover, focus, sm, lg, etc.) individually
  • 🔵 Arbitrary values: Highlights arbitrary prefix values and standalone arbitrary classes
  • 🟠 Optional base class support: Highlights base classes with wildcard patterns (bg-*, text-*, etc.)
  • 🟡 Smart detection: Works in HTML, JSX, template literals, CSS @apply directives, and more
  • 🟢 Fully configurable: Customize patterns, functions, and detection logic

Class Structure Analysis

The extension recognizes two main types of Tailwind constructs:

  1. Prefixes - Modifiers that end with a colon (:)

    • Examples: hover:, sm:, dark:, group-hover:
    • Checked against the prefix section of the theme
  2. Base Classes - Standalone utility classes without colons

    • Examples: bg-blue-500, text-lg, min-w-[100px]
    • Checked against the base section of the theme

Coloring Logic Examples

These are only examples. The default themes do not contain any entries in the base section.

Single Classes

/* Base class - uses base section */
bg-blue-500          → matches "bg-*" pattern in base section

/* Arbitrary class - uses arbitrary color */
[aspect-ratio:1/8]   → uses arbitrary color

/* Prefixed class - prefix color applies to entire class */
hover:bg-red-500     → "hover" color from prefix section

Multi-Prefix Classes

/* Each prefix gets its own color, last prefix colors the rest */
lg:checked:hover:bg-blue-500
├─ lg:               → "lg" color from prefix section
├─ checked:          → "checked" color from prefix section
└─ hover:bg-blue-500 → "hover" color from prefix section

Advanced Multi-Token Coloring

/* When both prefix and base class have theme entries */
lg:min-w-[1920px]
├─ lg:               → "lg" color (from prefix section)
└─ min-w-[1920px]    → "min-*" color (from base section)

Wildcard Pattern Matching

The extension supports wildcard patterns using the * character:

Prefix Wildcards

  • min-* in prefix section matches: min-lg:, min-xl:, min-[480px]:
  • Exact matches take priority: min-lg config overrides min-* config

Base Class Wildcards

  • bg-* in base section matches: bg-red-500, bg-[#ff0000], bg-gradient-to-r
  • min-* in base section matches: min-w-full, min-h-[100px]

Arbitrary Value Handling

/* Standalone arbitrary classes */
[aspect-ratio:1/8]     → arbitrary color

/* Arbitrary prefixes */
[&.show]:display-block → arbitrary color

Configuration Priority

The extension follows a specific lookup order for maximum flexibility:

For Prefixes:

  1. Exact match in prefix section
  2. Match without ignored modifiers (e.g., group-hover → hover)
  3. Match without group name (e.g., hover/opacity-50 → hover)
  4. Wildcard pattern match in prefix section
  5. Arbitrary color (for bracket-enclosed prefixes)

For Base Classes:

  1. Exact match in base section
  2. Wildcard pattern match in base section
  3. Arbitrary color (for bracket-enclosed classes)

Supported File Types

  • HTML, JavaScript, TypeScript
  • React (JSX/TSX), Vue, Svelte, Astro
  • PHP templates
  • CSS, SCSS, Sass, Less, Stylus, PostCSS
  • Template literals and CSS-in-JS

Installation

  1. Install from the VS Code marketplace
  2. Open a file with Tailwind CSS classes
  3. Classes will be automatically highlighted based on their prefixes

Configuration

Switching Themes

  1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  2. Type "Tailwind Rainbow: Select Theme"
  3. Choose from available themes: default, synthwave

Supported Languages

Configure which file types to process:

{
  "tailwindRainbow.languages": [
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "vue",
    "svelte",
    "astro",
    "php",
    "css",
    "scss",
    "sass",
    "less",
    "stylus",
    "postcss"
  ]
}

Custom Themes

Create or override themes with the following structure:

{
  "tailwindRainbow.themes": {
    "myTheme": {
      "prefix": {
        "hover": { "color": "#ff0000", "fontWeight": "bold" },
        "focus": { "color": "#00ff00", "fontWeight": "normal" },
        "sm": { "color": "#0000ff" },
        "lg": { "color": "#ffff00" }
      },
      "base": {
        "bg-*": { "color": "#ff6600", "fontWeight": "semibold" },
        "text-*": { "color": "#6600ff" },
        "p-*": { "color": "#00ffff" }
      },
      "arbitrary": { "color": "#ff00ff", "fontWeight": "italic" },
      "important": { "color": "#ff0000", "fontWeight": "bold" }
    }
  },
  "tailwindRainbow.theme": "myTheme"
}

Advanced Configuration

Class Detection Patterns

Customize how classes are detected in different contexts:

{
  "tailwindRainbow.classIdentifiers": [
    "class",
    "className",
    "class:",
    "className:",
    "classlist",
    "classes",
    "css",
    "style"
  ],
  "tailwindRainbow.classFunctions": ["cn", "clsx", "cva", "classNames", "classList", "twMerge", "tw", "styled", "css"],
  "tailwindRainbow.templatePatterns": ["class", "${", "tw`", "css`", "styled"],
  "tailwindRainbow.contextPatterns": ["variants", "cva", "class", "css", "style", "@apply"]
}

Ignored Prefix Modifiers

Configure which prefix modifiers to ignore during parsing. For example, when using Tailwind's group-hover pattern the extension will ignore the group modifier and color the entire prefix with the hover color:

{
  "tailwindRainbow.ignoredPrefixModifiers": ["group", "peer", "has", "in", "not"]
}

Extension API

Other extensions can register custom themes:

// Wait for activation
const tailwindRainbow = vscode.extensions.getExtension('esdete.tailwind-rainbow');
if (tailwindRainbow && !tailwindRainbow.isActive) {
  await tailwindRainbow.activate();
}

// Register theme
const api = tailwindRainbow?.exports;
if (api) {
  api.registerTheme('myCustomTheme', {
    prefix: {
      hover: { color: '#ff0000', fontWeight: 'bold' },
      // ... more prefixes
    },
    base: {
      'bg-*': { color: '#00ff00' },
      // ... more base patterns
    },
    arbitrary: { color: '#0000ff' },
    important: { color: '#ff00ff' },
  });
}

Contributing

You have an idea for a new feature or found a bug? Feel free to open an issue or submit a pull request!

  • Report bugs or request features via GitHub Issues
  • Submit pull requests with improvements
  • Share your custom themes with the community

License

Apache 2.0 License - see the LICENSE file for details

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft