bourhaouta/vscode-tailwindshades

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. Try it in the browser: **tailwindshades.bourhaouta.com**.
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)
Already inside an @theme { … } block? Only the variables are added.
Tailwind v3 (tailwind.config.js)
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.
| Version | Shades | In CSS files | In JS/TS files | Colors |
| --- | --- | --- | --- | --- |
| v4 | 50–950 | @theme block | config object | OKLCH |
| v3 | 50–950 | CSS variables | config object | hex |
| v2 | 50–900 | CSS variables | config object | hex |
| v1 | 100–900 | CSS variables | config object | hex |
Each version uses its own default palette as the reference, so a v1 palette looks like v1 colors.
Commands
| Command | What it does |
| --- | --- |
| **Generate color palette** | Picks the version and output for you (see above). Shortcut: Ctrl/Cmd + K Ctrl/Cmd + G |
| **Generate color palette (choose version and output)…** | Asks which Tailwind version and output to use |
| **Generate color palette as CSS variables** | Always writes --brand-500: …; variables |
Settings
| Setting | Default | Options |
| --- | --- | --- |
| tailwindshades.tailwindVersion | auto | auto, 4, 3, 2, 1 |
| tailwindshades.colorFormat | auto (OKLCH for v4, hex before) | auto, oklch, hex, rgb |
| tailwindshades.output | auto (from the file type) | auto, theme, config, cssVariables |
| tailwindshades.promptForName | true | Ask for the color name |
| tailwindshades.readablePairs | false | Add a comment with text and background pairs that pass WCAG AA contrast |
With readablePairs on, the palette starts with a comment like this, tested on the real shades: