MCP server

Tailwind Shades

io.github.bourhaouta/tailwindshades

Checked 26 Oct 2026, 08:29 UTC · Connected to it and listed its tools

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

Website Source

At a glance

Type

MCP server

Publisher

bourhaouta.com (verified by the MCP Registry)

Status

Working at last check

Tools

5

Token cost

About 1,388 tokens per request

Sets up in

Claude Code, Claude Desktop, Codex, Gemini CLI, Cursor, VS Code, Antigravity, ChatGPT, OpenAI API, Grok

Last checked

26 Oct 2026, 08:29 UTC

Connect it to your agent

Add to CursorAdd to VS CodeVS Code Insiders

Opens the app, which shows the server and asks you to confirm. For other apps, copy the setup below.

Claude Code

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

Claude Desktop

Settings → Connectors → Add custom connector, and paste the URL.

Codex (config.toml)

[mcp_servers.tailwindshades]
url = "https://tailwindshades.bourhaouta.com/mcp"

Gemini CLI

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

Cursor

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

VS Code

{"servers":{"tailwindshades":{"type":"http","url":"https://tailwindshades.bourhaouta.com/mcp"}}}

Antigravity

agy mcp add tailwindshades https://tailwindshades.bourhaouta.com/mcp

ChatGPT

Settings → Apps & Connectors → Advanced settings: turn on Developer mode, then Create a connector and paste the URL. Which plans can do this varies.

OpenAI API (Responses tools)

{"type":"mcp","server_label":"tailwindshades","server_url":"https://tailwindshades.bourhaouta.com/mcp","require_approval":"always"}

Grok (xAI API tools)

{"type":"mcp","server_label":"tailwindshades","server_url":"https://tailwindshades.bourhaouta.com/mcp"}

Tools

• convert_color ~168 tokens
  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
• find_closest_tailwind_color ~204 tokens
  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.
• generate_palette ~657 tokens
  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
• get_tailwind_palette ~206 tokens
  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.
• list_tailwind_colors ~153 tokens
  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.

Browse

• GitHub tools
• Tailwind tools
• GitHub and code hosting

Related MCP servers

• Color Palette
  Cloudflare Workers MCP server: color-palette
• PickShade color tools
  18 color tools: OKLCH, WCAG and APCA contrast fixes, palettes, gradients, color blindness, tokens.
• ScorpTech x402 API
  112 x402 pay-per-call tools: web data, security/OSINT, SEC and public data, Solana/EVM lookups
• Jinero
  AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.
• Brandize
  AI logo generation, brand color palettes, SEO meta tags, JSON-LD schema markup, and blog search.
• ColorPickr
  Contrast checks with fixes, OKLCH harmonies, palettes, color-blind previews and code export.
• Zovo Palette Lab
  WCAG contrast & palettes
• Color Pizza
  Color Pizza MCP — names hex colors using human-friendly color-name lists. Wraps the keyless Color…

Badge for your README

[![AptLynx](https://aptlynx.net/badge/io.github.bourhaouta/tailwindshades.svg)](https://aptlynx.net/servers/io.github.bourhaouta/tailwindshades)

Listing text is written by the maker; AptLynx lists tools and does not vouch for them. Find another tool · Browse by topic · For agents