# `nearest-tailwind-colors-mcp`

Model Context Protocol (MCP) server that exposes a single tool for finding the nearest Tailwind CSS palette colors to any CSS color.

## Install & build

- Requires Node 18+.
- Install deps: `npm install`.
- Build the project: `npm run build`.

## Configure in an MCP host

All hosts should point to the built entry: `/absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js`.

- **JSON-based hosts (Claude Desktop, Cursor, VS Code MCP extension)**: add this to the relevant `settings.json`/`claude_desktop_config.json`, then restart/reload:

```json
{
  "mcpServers": {
    "nearest-tailwind-colors": {
      "command": "node",
      "args": ["/absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js"]
    }
  }
}
```

- Claude Desktop: edit `claude_desktop_config.json`.
- Cursor: Settings → search "Model Context Protocol" → "Edit in settings.json".
- VS Code: User/Workspace `settings.json` with the MCP/Claude extension installed.

- **ChatGPT Codex (CLI and VS Code extension)**: add to `~/.codex/config.toml` (wrap in your shell if you need `nvm`/`fnm` to enforce node >= 18):

```toml
[mcp_servers.nearest_tailwind_colors]
command = "node"
args = ["/absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js"]
```

```toml
# with nvm
[mcp_servers.nearest_tailwind_colors]
command = "zsh"
args = [
  "-lc",
  "export NVM_DIR=\"$HOME/.nvm\"; source \"$NVM_DIR/nvm.sh\"; nvm use 20 >/dev/null; node /absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js",
]
```

## Available tool

- `nearest_tailwind_colors`: finds the closest Tailwind colors to a given CSS color.
  - `color` (string, required): any CSS color (`#fff`, `#fafafa`, `rgb(...)`, `hsl(...)`, named colors, etc.).
  - `n` (int, optional): number of colors to return (default 5, max 50).
  - `excludeColors` (string[], optional): Tailwind color names to skip (e.g. `["white", "black", "neutral-950"]`).
  - `space` (enum, optional): comparison color space (`cmyk`, `gl`, `hcg`, `hcl`, `hsi`, `hsl`, `hsv`, `lab`, `lch`, `oklab`, `oklch`, `rgb`; default `lab`).

## Example prompt

Prompt: "What are the 5 tailwind colors closest to the youtube logo?"

Response:

```
Closest Tailwind matches to YouTube red (`#ff0000`):

- red-600 — `#dc2626`
- orange-600 — `#ea580c`
- red-500 — `#ef4444`
- red-700 — `#b91c1c`
- orange-700 — `#c2410c`
```