Tailwind Shades MCP server

Tailwind CSS Shades

Generate a full Tailwind CSS color palette (50 to 950) from any color, right in your editor. Works with Tailwind v4, v3, v2 and v1.

VS Code Marketplace · Open VSX (Cursor, Windsurf, VSCodium)

Also as a command line tool and an MCP server for AI agents, with the same palettes.

Usage

1. Select a color, or just put the cursor on it: #db4d53, rgb(…), hsl(…), oklch(…) or a CSS color name.
2. Press Cmd+K Cmd+G (macOS) or Ctrl+K Ctrl+G, or run Tailwind Shades: Generate color palette from the Command Palette.
3. Pick a name. The closest Tailwind color is suggested; type your own (like brand) to keep Tailwind's color too.

With no color under the cursor, the extension asks you for one.

Tailwind v4 (CSS file)

@theme {
  --color-brand-50: oklch(97.1% 0.01 13.669);
  --color-brand-100: oklch(93.2% 0.024 14.006);
  --color-brand-200: oklch(87.7% 0.046 14.623);
  --color-brand-300: oklch(79.5% 0.085 15.86);
  --color-brand-400: oklch(68.7% 0.143 18.505);
  --color-brand-500: oklch(61.6% 0.177 21.62);
  --color-brand-600: oklch(56% 0.183 23.614);
  --color-brand-700: oklch(49.2% 0.159 23.807);
  --color-brand-800: oklch(43.6% 0.133 23.188);
  --color-brand-900: oklch(39.2% 0.106 22.012);
  --color-brand-950: oklch(25.8% 0.069 22.331);
}

Already inside an @theme { … } block? Only the variables are added.

Tailwind v3 (tailwind.config.js)

brand: {
  50: '#fdf2f3',
  100: '#fae2e3',
  200: '#f6c9cc',
  300: '#efa5a9',
  400: '#e7757a',
  500: '#db4d53',
  600: '#ca373c',
  700: '#aa2c30',
  800: '#8d272b',
  900: '#772528',
  950: '#411012',
},

How the shades are made

The palette follows Tailwind's own colors instead of simply mixing with white and black:

• It finds the Tailwind color closest to yours, and copies how that color's lightness, saturation and hue change from light to dark.
• Your color stays exactly as it is, at the shade where it fits best. A light color can become 200, not always 500.
• The math happens in OKLCH, the color space Tailwind v4 uses, so the steps look even to the eye.

Tailwind versions

The version is detected from your project, most reliable source first:

1. The closest package.json with a tailwindcss dependency
2. The current CSS file: @import "tailwindcss", @theme, @utility, @plugin → v4; @tailwind base; → v3
3. A tailwind.config.js (or .ts, .cjs, .mjs) in the project → v3
4. Other CSS files in the project, with the same hints as step 2

If nothing is found, v4 is used. The status bar tells you which version was used and why, e.g. v3 from tailwind.config.js.

Each version uses its own default palette as the reference, so a v1 palette looks like v1 colors.

Commands

Shortened. The full README is on GitHub.