Tailwind Shades

io.github.bourhaouta/tailwindshadesVersion 1.6.0

Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults

Status

Responds221 msNov 14, 2026, 14:46 UTCAnswered our handshake without sign-in.

Registry data may be out of date

We could not refresh it, so this page shows the last copy.

Last checked: Nov 14, 2026, 14:46 UTC
Latency: 221 ms
Remotes responding: 1 of 1
Sign-in: No sign-in
Hosting: Hosted outside the EU (detected)
Registry data as of: Nov 14, 2026, 22:14 UTC

Data from the official MCP Registry, checked by run.zero. How we check

Connect

Streamable HTTP

https://tailwindshades.bourhaouta.com/mcpResponds221 msNov 14, 2026, 14:46 UTC

No sign-in

Claude Code

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

Claude Desktop and claude.ai

1
2
3

Settings > Connectors > Add custom connector
Name: tailwindshades
Remote MCP server URL: https://tailwindshades.bourhaouta.com/mcp

Cursor

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

VS Code

code --add-mcp '{"name":"tailwindshades","type":"http","url":"https://tailwindshades.bourhaouta.com/mcp"}'

Streamable HTTP

npm: tailwindshades-mcp 1.6.0

Package only

npm (npx)

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

Built your own server? run.zero hosts MCP servers on European infrastructure.

Host your own MCP server on run.zero

Tools

5 tools

Tools of Tailwind Shades
	Description		Read-only	Idempotent	Open world
`convert_color`Converts 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. Use it for one value; to add a color with all its shades, call generate_palette instead.	Converts 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. Use it for one value; to add a color with all its shades, call generate_palette instead.	Not declared	Yes	Yes	No
`find_closest_tailwind_color`Finds 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 visible, use generate_palette to add the exact color as a custom palette instead.	Finds 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 visible, use generate_palette to add the exact color as a custom palette instead.	Not declared	Yes	Yes	No
`generate_palette`Generates 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 shades. The input color stays exactly at its best-fit shade, and the other shades follow the closest Tailwind color, so they look like Tailwind's own.	Generates 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 shades. The input color stays exactly at its best-fit shade, and the other shades follow the closest Tailwind color, so they look like Tailwind's own.	Not declared	Yes	Yes	No
`get_tailwind_palette`Looks 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 color values from memory. Values are oklch() in v4 and hex in older versions.	Looks 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 color values from memory. Values are oklch() in v4 and hex in older versions.	Not declared	Yes	Yes	No
`list_tailwind_colors`Lists 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_palette or picking a utility class.	Lists 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_palette or picking a utility class.	Not declared	Yes	Yes	No

Details

Registry status: Active
Published: Oct 13, 2026
Updated: Oct 13, 2026
Website: https://tailwindshades.bourhaouta.com/⁠ (opens in a new tab)
Repository: https://github.com/bourhaouta/vscode-tailwindshades⁠ (opens in a new tab)
Categories: Uncategorized
GDPR: Not declared

Are you the operator? Claim this listing