# Tailwind Shades [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/bourhaouta/vscode-tailwindshades  
**GitHub Stars:** 78  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/tailwind-shades

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

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "tailwind-shades": {
    "command": "npx",
    "args": ["-y","tailwindshades-cli"]
  }
}
```

## Documentation

## What Tailwind Shades MCP server does

Tailwind Shades MCP server gives AI coding agents access to the palette engine behind the Tailwind Shades project. It works with Tailwind CSS color data and supports versions 1, 2, 3, and 4. The server can generate a complete shade range from an input color, identify the nearest built-in Tailwind color, return Tailwind's predefined palettes, enumerate available color names, and convert colors between formats.

Palette generation follows the project's Tailwind-oriented shading method rather than a basic white-and-black mix. The input color remains unchanged at the shade where it best fits, and the remaining shades follow the reference Tailwind color's changes in lightness, saturation, and hue. Calculations use OKLCH, including the format used by Tailwind v4.

## How it works

The MCP implementation exposes five tools:

- `generate_palette` creates the same palette produced by the extension and CLI for a selected Tailwind version.
- `find_closest_tailwind_color` returns the closest Tailwind class for a supplied color and indicates whether the difference is visible.
- `get_tailwind_palette` returns Tailwind's own default colors for a selected version.
- `list_tailwind_colors` lists the default color names available in a version.
- `convert_color` converts an input color to OKLCH, hex, and RGB representations.

The generated ranges depend on the selected version: v4, v3, and v2 use shades 50 through 950 or 900 as defined by their palettes, while v1 uses 100 through 900. The README documents the exact version-specific ranges and formats: v4 uses OKLCH, while earlier versions use hex in the corresponding configuration or CSS output.

## Setup and configuration

The Tailwind Shades MCP server can be used as a hosted service at `https://tailwindshades.bourhaouta.com/mcp`, so no package installation is needed for the remote option. Claude Code, Cursor, and VS Code each have documented HTTP configuration examples using that endpoint.

For a local connection, run `npx -y tailwindshades-mcp` as a stdio server and register that command with the MCP client. The provided setup example uses Claude Code's `claude mcp add` command. The package is also listed in the MCP Registry as `io.github.bourhaouta/tailwindshades`.

No environment variables are documented as required. The README does not describe authentication, project discovery, or server-specific configuration for the MCP package.

## Tools and capabilities

Use `generate_palette` when an agent needs a full custom color scale for a Tailwind project. Use `find_closest_tailwind_color` when selecting an existing utility such as a nearby `red-500` value. `get_tailwind_palette` is intended for retrieving exact built-in values rather than relying on model memory, while `list_tailwind_colors` helps inspect the available names for a version.

`convert_color` is useful when a workflow needs the same input represented as OKLCH, hex, and RGB. Together, these tools cover custom palette creation, default palette lookup, color matching, name discovery, and format conversion.

## Limitations and notes

The server exposes color and palette operations; it does not document file editing or direct modification of a project. The `add_brand_color` item described in the README is an MCP prompt shown by Claude Code, not one of the five tools.

Version selection matters because each Tailwind release has its own default palette and output conventions. The MCP excerpt does not specify automatic version detection behavior for standalone server calls, so clients should provide or otherwise determine the intended Tailwind version when that distinction matters. Remote and local transports are documented, but authentication and availability guarantees for the hosted endpoint are not described.

_Full upstream README: https://allmcps.com/mcp/tailwind-shades/readme_