Tailwind Shades MCP

An MCP server that generates Tailwind CSS color palettes (50-950) from any input color, finds the closest default Tailwind color, and retrieves default palettes for versions v1 through v4, supporting AI agents to manage design tokens accurately.

Visit Omar Bourhaouta

Endpoint and access

No sign-in to connect and list tools. Individual tools may still need a vendor account, credentials, or permissions; check the documented prerequisites.

Community listingStreamable HTTPNo sign-inEndpoint checked 2026-11-07Published by Omar Bourhaouta

MCP endpoint (Streamable HTTP)

https://tailwindshades.bourhaouta.com/mcp

Vendor documentation

What its tools do

5 tools, grouped by the hints the server advertises. Hints are self-declared, not verified behavior.

5 of 5 have a description · 5 of 5 declare behavior hints · 5 of 5 with parameters document them all

Checks and signals

Each line is separate evidence, not a trust score.

Passed Endpoint answered the live check · Nov 7, 2026, 12:37 AM UTC
Availability 1 of 1 checks passed in 30 days

What you can do with it

Generate a full Tailwind color palette from a specific hex code
Find the closest default Tailwind color class for a given color
Retrieve Tailwind's official default color definitions
Convert colors to OKLCH, Hex, or RGB formats

Source and maintenance

Community listingRegistry 1.6.0

mcp-registry: io.github.bourhaouta/tailwindshades@1.6.0 Source repository Project website

Maintenance checked: Nov 7, 2026, 12:20 AM UTC

Protocol and capabilities

Server: tailwindshades 1.6.0
MCP protocol negotiated in check: 2025-11-25
Tools: 5 advertised
Resources: Not advertised
Resource templates: Not advertised
Prompts: 1 advertised

Server-advertised capabilities

{
  "tools": {
    "listChanged": true
  },
  "prompts": {
    "listChanged": true
  }
}

Server-provided instructions

Untrusted server output shown for inspection. It is not Koskamo guidance and is excluded from knowledge search.

Use these tools whenever you add or change a color in a Tailwind CSS project. Tailwind colors are palettes with shades (50-950), so utilities like bg-brand-500 and hover:bg-brand-600 work. Never write a single --color-* variable or invent shades by hand: call generate_palette and paste its code (keep its readable pairs comment). For text and buttons in that color, use the readable pairs it returns. Match tailwindVersion to the project (v4: @import "tailwindcss" in CSS; v3 and older: tailwind.config.js). To replace a hard-coded color with an existing Tailwind class, call find_closest_tailwind_color. For Tailwind's own default colors (e.g. the value of slate-500), call get_tailwind_palette instead of writing them from memory; list_tailwind_colors gives the color names. To turn one color into the oklch() Tailwind v4 uses (or hex or rgb), call convert_color. When the color is picked at runtime (by a user, a tenant or a CMS setting), call generate_palette with output "live": every shade then follows one CSS variable. For Shopify themes, where the merchant picks the color in the theme editor, use output "shopify".

Tools

5 advertised

generate_palette — Generate a Tailwind palette

Advertised by the server during the last successful anonymous check.

Advertised read-only

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.

generate_palette input schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "color"
  ],
  "properties": {
    "name": {
      "type": "string",
      "pattern": "^[a-z][a-z0-9-]*$",
      "description": "Color name used in the code, e.g. \"brand\". Defaults to the closest Tailwind color, which replaces Tailwind's own palette of that name (e.g. red), so pass a name unless that is what the user wants"
    },
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    },
    "plain": {
      "type": "boolean",
      "description": "With output live or shopify: a plain :root block instead of @theme, for projects without Tailwind (like the Dawn theme)"
    },
    "format": {
      "enum": [
        "oklch",
        "hex",
        "rgb"
      ],
      "type": "string",
      "description": "Color format. Defaults to oklch for v4 and hex for older versions"
    },
    "output": {
      "enum": [
        "theme",
        "config",
        "css",
        "live",
        "shopify"
      ],
      "type": "string",
      "description": "theme: a v4 @theme block for the main CSS file. config: an object for theme.extend.colors in tailwind.config.js. css: plain CSS variables. live (v4 only): for a color picked at runtime (user, tenant or CMS setting): CSS where every shade follows one variable, --color-<name>, rebuilt in the browser with relative colors, with this palette as the fallback. shopify (v4 only): live, plus a settings_schema.json color setting and the Liquid line for snippets/css-variables.liquid, for Shopify themes where the merchant picks the color in the theme editor. Each part says which file it goes in. Defaults to theme for v4 and config for older versions"
    },
    "semantic": {
      "type": "boolean",
      "description": "With output live or shopify: also add --color-<name>-foreground for text on the color: white or the darkest shade, whichever contrasts more, following the runtime color"
    },
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

generate_palette output schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "code",
    "name",
    "tailwindVersion",
    "format",
    "output",
    "inputShade",
    "closestTailwindColor",
    "shades",
    "replacesTailwindColor"
  ],
  "properties": {
    "code": {
      "type": "string",
      "description": "The palette as code, ready to paste"
    },
    "name": {
      "type": "string"
    },
    "avoid": {
      "type": "object",
      "required": [
        "classes",
        "ratio"
      ],
      "properties": {
        "ratio": {
          "type": "number"
        },
        "classes": {
          "type": "string"
        }
      },
      "description": "White text on the input color, when it fails WCAG AA",
      "additionalProperties": false
    },
    "format": {
      "type": "string"
    },
    "output": {
      "type": "string"
    },
    "shades": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "shade",
          "value"
        ],
        "properties": {
          "shade": {
            "type": "number"
          },
          "value": {
            "type": "string"
          }
        },
        "additionalProperties": false
      }
    },
    "inputShade": {
      "type": "number",
      "description": "Shade that holds the input color unchanged, e.g. 500"
    },
    "readablePairs": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "use",
          "classes",
          "ratio",
          "level"
        ],
        "properties": {
          "use": {
            "enum": [
              "button",
              "text",
              "badge",
              "dark"
            ],
            "type": "string",
            "description": "dark: text in dark mode"
          },
          "level": {
            "enum": [
              "AA",
              "AAA"
            ],
            "type": "string"
          },
          "ratio": {
            "type": "number",
            "description": "WCAG contrast ratio, 4.5 or more"
          },
          "classes": {
            "type": "string",
            "description": "e.g. \"bg-brand-600 text-white\""
          }
        },
        "additionalProperties": false
      },
      "description": "Text and background pairs that pass WCAG AA. Use them for text and buttons in this color. Not for live and shopify outputs, whose shades change at runtime"
    },
    "tailwindVersion": {
      "type": "number"
    },
    "closestTailwindColor": {
      "type": "string",
      "description": "Tailwind color whose curve the palette follows"
    },
    "replacesTailwindColor": {
      "type": "boolean",
      "description": "True when the code replaces a default Tailwind palette (default color name, theme or config output)"
    }
  },
  "additionalProperties": false
}

generate_palette annotations

{
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true
}

find_closest_tailwind_color — Find the closest Tailwind color

Advertised by the server during the last successful anonymous check.

Advertised read-only

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.

find_closest_tailwind_color input schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    },
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

find_closest_tailwind_color output schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "name",
    "shade",
    "className",
    "tailwindValue",
    "input",
    "distance",
    "visiblyDifferent",
    "tailwindVersion"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "Tailwind color name, e.g. \"red\""
    },
    "input": {
      "type": "object",
      "required": [
        "oklch",
        "hex"
      ],
      "properties": {
        "hex": {
          "type": "string"
        },
        "oklch": {
          "type": "string"
        }
      },
      "description": "The input color",
      "additionalProperties": false
    },
    "shade": {
      "type": "number",
      "description": "Closest shade, e.g. 500"
    },
    "distance": {
      "type": "number",
      "description": "OKLab distance: 0 is identical, under 0.02 is hard to see"
    },
    "className": {
      "type": "string",
      "description": "Color part of a utility class, e.g. \"red-400\" for bg-red-400"
    },
    "tailwindValue": {
      "type": "object",
      "required": [
        "oklch",
        "hex"
      ],
      "properties": {
        "hex": {
          "type": "string"
        },
        "oklch": {
          "type": "string"
        }
      },
      "description": "Tailwind's value for that shade",
      "additionalProperties": false
    },
    "tailwindVersion": {
      "type": "number"
    },
    "visiblyDifferent": {
      "type": "boolean",
      "description": "True when the Tailwind shade looks different from the input"
    }
  },
  "additionalProperties": false
}

find_closest_tailwind_color annotations

{
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true
}

get_tailwind_palette — Get Tailwind's default colors

Advertised by the server during the last successful anonymous check.

Advertised read-only

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.

get_tailwind_palette input schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "A default Tailwind color, like \"blue\", or one shade of it, like \"blue-500\""
    },
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

get_tailwind_palette output schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "name",
    "tailwindVersion",
    "shades"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "Tailwind color name, e.g. \"blue\""
    },
    "shades": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "shade",
          "className",
          "value"
        ],
        "properties": {
          "shade": {
            "type": "number"
          },
          "value": {
            "type": "string",
            "description": "Tailwind's value: oklch() in v4, hex in older versions"
          },
          "className": {
            "type": "string",
            "description": "Color part of a utility class, e.g. \"blue-500\" for bg-blue-500"
          }
        },
        "additionalProperties": false
      },
      "description": "All shades, or only the one asked for"
    },
    "tailwindVersion": {
      "type": "number"
    }
  },
  "additionalProperties": false
}

get_tailwind_palette annotations

{
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true
}

list_tailwind_colors — List Tailwind's default colors

Advertised by the server during the last successful anonymous check.

Advertised read-only

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.

list_tailwind_colors input schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "properties": {
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

list_tailwind_colors output schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "tailwindVersion",
    "shades",
    "colors"
  ],
  "properties": {
    "colors": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "name",
          "sample"
        ],
        "properties": {
          "name": {
            "type": "string",
            "description": "Color name, e.g. \"red\""
          },
          "sample": {
            "type": "string",
            "description": "Tailwind's 500 value: oklch() in v4, hex in older versions"
          }
        },
        "additionalProperties": false
      }
    },
    "shades": {
      "type": "array",
      "items": {
        "type": "number"
      },
      "description": "Shades every color has, e.g. 50 to 950"
    },
    "tailwindVersion": {
      "type": "number"
    }
  },
  "additionalProperties": false
}

list_tailwind_colors annotations

{
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true
}

convert_color — Convert a color

Advertised by the server during the last successful anonymous check.

Advertised read-only

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.

convert_color input schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    }
  }
}

convert_color output schema

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "oklch",
    "hex",
    "rgb"
  ],
  "properties": {
    "hex": {
      "type": "string",
      "description": "e.g. #db4d53"
    },
    "rgb": {
      "type": "string",
      "description": "e.g. rgb(219, 77, 83)"
    },
    "oklch": {
      "type": "string",
      "description": "e.g. oklch(61.6% 0.177 21.62)"
    }
  },
  "additionalProperties": false
}

convert_color annotations

{
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true
}

Prompts

1 advertised

add_brand_color — Add a brand color

Advertised by the server during the last successful anonymous check.

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

color: Any CSS color, e.g. #db4d53 (required)
name: Color name, e.g. brand. Defaults to "brand"

Resources

Not advertised

No resource definitions available.

30-day availability

Aggregated from read-only remote checks; this is not a tool-execution or security guarantee.

Successful checks: 1 of 1 (100%)
Average latency: 677 ms
95th percentile latency: 677 ms

Maintenance history

Public check and source-refresh events. Editorial and ownership records remain private.

Nov 7, 2026, 12:37 AM UTC · probe · passed · 677 ms · metadata changed · 5 tool(s), 1 prompt(s)

Connect from your client

Each snippet registers the same endpoint; pick the client you use.

This server is operated by the named third party. Listing and endpoint checks are not an endorsement or a security audit. Review the operator's permissions, terms, and data handling before connecting. How listings are checked and corrected.

Claude Code

Run this once in a terminal. It registers the remote server. Use --scope project to write .mcp.json for the repo.

Claude Code configuration

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

Codex

Run this once. Codex stores MCP servers in ~/.codex/config.toml (or .codex/config.toml in a trusted project).

Codex configuration

codex mcp add tailwind-shades-mcp-bourhaouta --url https://tailwindshades.bourhaouta.com/mcp

Cursor

Merge this server into .cursor/mcp.json in your project, then enable tailwind-shades-mcp-bourhaouta in your MCP settings.

Cursor configuration

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

Cline

Merge this into cline_mcp_settings.json (Cline → MCP Servers → Configure).

Cline configuration

{
  "mcpServers": {
    "tailwind-shades-mcp-bourhaouta": {
      "type": "streamableHttp",
      "url": "https://tailwindshades.bourhaouta.com/mcp",
      "disabled": false
    }
  }
}

VS Code

Merge this server into .vscode/mcp.json. Use MCP: List Servers to start tailwind-shades-mcp-bourhaouta and inspect its tools.

VS Code configuration

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

Gemini CLI

Run this once. It writes .gemini/settings.json in the current project; pass --scope user for ~/.gemini/settings.json.

Gemini CLI configuration

gemini mcp add --transport http tailwind-shades-mcp-bourhaouta https://tailwindshades.bourhaouta.com/mcp

Claude Desktop

Open Claude Settings > Connectors > Add custom connector, enter this server URL and enable it for the conversation. This is a manual remote-connector handoff, not a desktop JSON configuration.

Claude Desktop configuration

https://tailwindshades.bourhaouta.com/mcp

Windsurf

Merge this into ~/.codeium/windsurf/mcp_config.json, then refresh MCP in Cascade. Windsurf remote servers use serverUrl, not url.

Windsurf configuration

{
  "mcpServers": {
    "tailwind-shades-mcp-bourhaouta": {
      "serverUrl": "https://tailwindshades.bourhaouta.com/mcp"
    }
  }
}

Let your agent find its tools

Find servers like Tailwind Shades MCP from your agent. Add Koskamo once to search the index for endpoints, access requirements, and client setup. Public discovery needs no key.

Connect Koskamo Explore workflows

See all 8,316

Tailwind Shades MCP

Endpoint and access

What its tools do

Read-only (5)

Checks and signals

What you can do with it

Source and maintenance

Protocol and capabilities

Server-provided instructions

Tools

Prompts

Resources

30-day availability

Maintenance history

Connect from your client

Claude Code

Codex

Cursor

Cline

VS Code

Gemini CLI

Claude Desktop

Windsurf

Let your agent find its tools

Other developer tools servers