Tailwind Shades

Connect it to your AI

Claude Code

claude mcp add --transport http tailwindshades https://tailwindshades.bourhaouta.com/mcp

Claude, ChatGPT, Cursor and other apps

Add it as a custom connector with this URL (Streamable HTTP):

https://tailwindshades.bourhaouta.com/mcp

claude mcp add tailwindshades -- npx -y tailwindshades-mcp@1.6.0

Cursor, VS Code and other apps (mcp.json)

{
  "mcpServers": {
    "tailwindshades": {
      "url": "https://tailwindshades.bourhaouta.com/mcp"
    }
  }
}

Tools it offers

5 tools, as the server itself reported during our check on Oct 31, 2026.

• generate_paletteGenerates a full Tailwind CSS palette (50-950) from one color, ready to paste. Call it whenever you add a color to a Tailwind theme (e.g. "add a brand color #db4d53"), instead of writing a single variable or inventing sh
• find_closest_tailwind_colorFinds the shade in Tailwind's default palette that looks most like a given color, e.g. #db4d53 -> red-500. Use it to pick an existing Tailwind class (bg-red-500) instead of an arbitrary value. If the difference is visibl
• get_tailwind_paletteLooks up Tailwind's own default colors, exactly as Tailwind defines them: a whole color (e.g. "blue", all shades) or one shade (e.g. "slate-500"), for Tailwind v4, v3, v2 or v1. Use it instead of writing default Tailwind
• list_tailwind_colorsLists the names of Tailwind's default colors for a Tailwind version (e.g. red, slate, mauve in v4), with the shades each one has and its 500 value as a sample. Use it to see which colors exist before calling get_tailwind
• convert_colorConverts any CSS color to oklch(), hex and rgb, formatted like Tailwind (oklch() is what Tailwind v4 uses). Colors outside a format are mapped into it: oklch() to Display P3 like Tailwind's palette, hex and rgb to sRGB.

Questions