Tailwind Shades

tailwindshades-mcp

一个 MCP 服务，可为 AI Agent 提供真实的 Tailwind CSS 调色板，让它们不再猜测色阶。支持 Tailwind v4、v3、v2 和 v1。

让 Agent “为我的主题添加品牌颜色 #db4d53”，它便会按照项目的 Tailwind 格式生成完整的 50 到 950 调色板，并将 #db4d53 准确设为 brand-500。它与 Tailwind Shades 编辑器扩展和 tailwindshades.bourhaouta.com 使用相同的引擎。

设置

远程（无需安装）

将 Agent 连接到 https://tailwindshades.bourhaouta.com/mcp（Streamable HTTP，无需 API 密钥）。

Claude Code

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

Cursor（~/.cursor/mcp.json，或项目中的 .cursor/mcp.json）

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

VS Code（.vscode/mcp.json）

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

本地（stdio）

使用 npx 在你的计算机上运行，因此不会有任何内容离开本机。需要 Node.js 20 或更高版本。

Claude Code

claude mcp add --scope user tailwindshades -- npx -y tailwindshades-mcp

Cursor（~/.cursor/mcp.json，或项目中的 .cursor/mcp.json）

{
  "mcpServers": {
    "tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }
  }
}

VS Code（.vscode/mcp.json）

{
  "servers": {
    "tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }
  }
}

其他 Agent：使用上面的 URL，或运行 npx -y tailwindshades-mcp 作为 stdio 服务。它也已列入 MCP Registry，名称为 io.github.bourhaouta/tailwindshades。

工具

这五种工具均为只读。

generate_palette

根据一种颜色生成完整的调色板，可直接粘贴使用。

输入	默认值
color	必填：任意 CSS 颜色（#db4d53、rgb()、hsl()、oklch() 或颜色名称）
name	最接近的 Tailwind 颜色；它会替代 Tailwind 自带的调色板，因此工具会发出警告
tailwindVersion	4（也支持 3、2、1）
format	v4 使用 oklch，更早版本使用 hex（也支持 rgb）
output	v4 使用 theme，更早版本使用 config（也支持 css，以及 v4 的 live 和 shopify）
plain、semantic	false：搭配 live 或 shopify 时，使用普通的 :root 区块而不是 @theme，并生成 --color-<name>-foreground

live 适用于运行时选取的颜色（用户、租户或 CMS 设置）：生成 CSS，使每个色阶都跟随一个变量，并在浏览器中重新构建。shopify 会为 Shopify 主题添加颜色设置和 Liquid 行，商家可在主题编辑器中选取颜色。参见运行时选取的颜色。

返回代码，以及以结构化数据提供的色阶、与输入颜色相符的色阶和最接近的 Tailwind 颜色。

代码以一条注释开头，其中列出易于阅读的组合：通过 WCAG AA（4.5:1）标准的文字和背景类，并基于实际色阶进行测试。Agent 会用它们来设置按钮和文本，因此红色品牌会使用 bg-brand-600 text-white，而不是未通过测试的 bg-brand-500 text-white：

/* Readable pairs (WCAG AA, 4.5:1 or more):
   button     bg-brand-600 text-white      5.09:1
   text       bg-white text-brand-600      5.09:1
   badge      bg-brand-100 text-brand-700  5.43:1
   dark mode  bg-brand-950 text-brand-400  5.33:1
   avoid      bg-brand-500 text-white      4.03:1 */

find_closest_tailwind_color

找出外观最接近某种颜色的 Tailwind 色阶，例如 #db4d53 → red-500，并提供 Tailwind 的颜色值、色差，以及差异是否可见。Agent 可用它来选择现有类，而不是使用任意值；也可据此判断是否需要自定义调色板。

get_tailwind_palette

获取 Tailwind 自带的默认颜色，与 Tailwind 的定义完全一致：可以是完整颜色（blue），也可以是单个色阶（slate-500），支持 Tailwind v4、v3、v2 或 v1。v4 的值采用 oklch()，更早版本采用 hex。Agent 可用它代替凭记忆编写 Tailwind 默认值。

list_tailwind_colors

列出某个版本的 Tailwind 默认颜色名称（v4 中有 26 种，包括 mauve、olive、mist 和 taupe），以及各颜色包含的色阶，并以其 500 色阶作为示例。

convert_color

将任意 CSS 颜色转换为 oklch()、hex 和 rgb，并按 Tailwind 格式输出。当 Tailwind v4 项目只需要一个 oklch() 值，而非完整调色板时，非常实用。

提示词

add_brand_color

参数：color 和可选的 name（默认值为 brand）。它会要求 Agent 查找项目使用的 Tailwind 版本，调用 generate_palette，并将代码粘贴到主题中。Claude Code 等客户端会将其显示为斜杠命令。

自行托管

该包还会导出 createServer()，它会创建一个包含所有工具和提示词的全新 McpServer。使用 MCP TypeScript SDK 为其提供服务，例如，在任何符合 Web 标准的运行时中通过 HTTP 提供服务（上面的远程服务就是通过 Next.js 路由运行的）：

import { createMcpHandler } from '@modelcontextprotocol/server'
import { createServer } from 'tailwindshades-mcp'

const handler = createMcpHandler(createServer)

export const POST = (request: Request) => handler.fetch(request)

更多

• tailwindshades-cli：通过命令行使用相同的调色板
• 源代码和问题反馈

许可证

MIT © Omar Bourhaouta