Back to search
100
MCP live MCP 2026-07-28 http

tailwindshades

bourhaouta/tailwindshades

Tailwind CSS palettes (50-950) from any color for Tailwind v4, v3, v2 and v1, plus the closest Tailwind color, Tailwind's own default colors, and color conversion. No API key needed.

Website ↗
Watch this dependency Share evidence report
Uptime
100.0%
5 direct probes · 30d
Response
1003ms
last probe
Tools
5
callable
Resources
0
readable
Prompts
1
available
Primary URL
https://tailwindshades.bourhaouta.com/mcp
Score: 100/100
Handshake verified by our own probe.
pass Answers the MCP handshake 50/50
The handshake and the list calls succeeded on the primary URL.
pass Lists tools, resources or prompts 30/30
5 tools, 0 resources, 1 prompts returned.
pass 3 or more catalogue items 10/10
6 items in total; 3 or more earns these points.
pass Describes itself 10/10
182 characters; more than 30 earns these points.

Tools · 5

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 vari…

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 …

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 writ…

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 …

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, h…

Prompts · 1

add_brand_color

Add a color with all its shades (50-950) to the Tailwind theme of this project

How to use

Claude Desktop or claude.ai: add a custom connector (Customize → Connectors; on Team and Enterprise plans an owner adds it under Organization settings → Connectors) with this server URL: https://tailwindshades.bourhaouta.com/mcp

Cursor or Cline: add to your MCP config:

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