Tailwind Shades — Claude Code MCP server: Tailwind palettes
Turns any color into a full Tailwind palette from 50 to 950 and finds the closest default shade, so the agent stops guessing.
claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcpWhat Tailwind Shades does
The server hands your agent real Tailwind CSS palettes. Ask it to add a brand color and it gets the full 50 to 950 range in your project's Tailwind format, with the input color sitting exactly at brand-500. Tailwind v4, v3, v2 and v1 are all covered.
Five read-only tools do the work: generate_palette builds a palette from one color, find_closest_tailwind_color matches a color to a default shade, get_tailwind_palette returns Tailwind's own values, list_tailwind_colors lists the color names, and convert_color outputs oklch(), hex and rgb. There is also an add_brand_color prompt: it tells the agent to detect the project's Tailwind version, call generate_palette and paste the result into the theme. In Claude that prompt shows up as a slash command.
Setup can be remote through https://tailwindshades.bourhaouta.com/mcp, no API key and nothing to install. The local route runs npx -y tailwindshades-mcp and needs Node.js 20 or later, but keeps everything on your machine. On an older Node version the local server will not start, so use the remote URL there.
What it helps with
- build a shade palette from a brand color
- pick the nearest default Tailwind class instead of an arbitrary value
- pull Tailwind's own color values without retyping them
- convert a color to
oklch()for a Tailwind v4 project - check which text and background pairs pass WCAG AA
Example prompts for the agent
- Add a brand color #db4d53 to my theme
- Generate a Tailwind palette from #db4d53 for version 4
- Find the closest Tailwind color to #db4d53
How to install Tailwind Shades
1Platform CLI: remote server
claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp2Platform CLI
claude mcp add mcp -- npx -y tailwindshades-mcp1Platform CLI: remote server
codex mcp add mcp --url https://tailwindshades.bourhaouta.com/mcp2Platform CLI
codex mcp add mcp -- npx -y tailwindshades-mcpConfig file
{
"mcpServers": {
"mcp": {
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"tailwindshades-mcp"
]
}
}
}Config file
{
"servers": {
"mcp": {
"type": "http",
"url": "https://tailwindshades.bourhaouta.com/mcp"
}
}
}{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"tailwindshades-mcp"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http mcp https://tailwindshades.bourhaouta.com/mcp2Platform CLI
gemini mcp add mcp npx -y tailwindshades-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Tailwind Shades
How do I install Tailwind Shades in Claude Code?
Remote: claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp. Local: claude mcp add --scope user tailwindshades -- npx -y tailwindshades-mcp.
What does Tailwind Shades do?
It generates Tailwind palettes from 50 to 950 from any CSS color, finds the closest default Tailwind color, and returns Tailwind's own palettes for v4, v3, v2 and v1.
Does Tailwind Shades need an API key?
The remote server needs no key; it connects over Streamable HTTP. The local option only needs Node.js 20 or later.
