Tailwind Shades

io.github.bourhaoutav1.1.0Updated Oct 1, 2026

Tailwind CSS palettes (50-950) from any color for v4-v1, and the closest Tailwind color

VerifiedSTDIODesktop onlyOther

Installation

In SourceWeft

  1. Open Tailwind Shades in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

tailwindshades-mcp

An MCP server that gives AI agents real Tailwind CSS palettes, so they stop guessing shades. Works with Tailwind v4, v3, v2 and v1.

Ask your agent "Add a brand color #db4d53 to my theme", and it writes a full 50 to 950 palette in the project's Tailwind format, with #db4d53 exactly at brand-500. Same engine as the Tailwind Shades editor extension.

Setup

Claude Code

sh
claude mcp add --scope user tailwindshades -- npx -y tailwindshades-mcp

Cursor (~/.cursor/mcp.json, or .cursor/mcp.json in a project)

json
{  "mcpServers": {    "tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }  }}

VS Code (.vscode/mcp.json)

json
{  "servers": {    "tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }  }}

Other agents: run npx -y tailwindshades-mcp as a stdio server. It's also in the MCP Registry as io.github.bourhaouta/tailwindshades.

Needs Node.js 20 or later. No API keys, and nothing leaves your machine.

Tools

Both tools are read-only.

generate_palette

A full palette from one color, ready to paste.

InputDefault
colorrequired: any CSS color (#db4d53, rgb(), hsl(), oklch(), a name)
namethe closest Tailwind color, which replaces Tailwind's own palette, so the tool warns
tailwindVersion4 (also 3, 2, 1)
formatoklch for v4, hex before (also rgb)
outputtheme for v4, config before (also css)

Returns the code, plus the shades, the shade that holds the input color and the closest Tailwind color as structured data.

closest_tailwind_color

The Tailwind shade that looks most like a color, e.g. #db4d53 → red-500, with Tailwind's value, the distance, and whether the difference is visible. Agents use it to pick an existing class instead of an arbitrary value, or to decide a custom palette is needed.

More

License

MIT © Omar Bourhaouta

Source: packages/mcp/README.md at commit 50f738b

Tools

0
Tool metadata has not been indexed yet.

Version history

1
  1. v1.1.0LatestOct 1, 2026