AI导哈

Tailwind CSS颜色匹配工具

一个用于查找与任何CSS颜色最接近的Tailwind CSS调色板颜色的MCP服务器工具，适用于前端开发和设计场景。

  • by brunocpf
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 brunocpf/nearest-tailwind-colors-mcp

使用说明

nearest-tailwind-colors-mcp

模型上下文协议（MCP）服务器，它提供了一个工具，用于查找与任何CSS颜色最接近的顺风CSS调色板颜色。

安装和构建

  • 需要节点18+。
  • 安装deps： npm install.
  • 构建项目： npm run build.

在MCP主机中配置

所有主机都应指向内置条目： /absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js.

  • 基于JSON的主机（Claude Desktop、Cursor、VS Code MCP扩展）：将此添加到相关内容中 settings.json/claude_desktop_config.json，然后重新启动/重新加载：
{
  "mcpServers": {
    "nearest-tailwind-colors": {
      "command": "node",
      "args": ["/absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js"]
    }
  }
}

  • 克劳德桌面：编辑 claude_desktop_config.json.

  • 光标：设置→ 搜索“模型上下文协议”→ “在settings.json中编辑”。

  • VS代码：用户/工作区 settings.json 安装了MCP/Claude扩展。

  • ChatGPT Codex（CLI和VS代码扩展）：添加到 ~/.codex/config.toml （如果需要的话，用你的外壳包起来 nvm/fnm 强制节点>=18）：

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

# 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",
]

可用工具

  • nearest_tailwind_colors：查找与给定CSS颜色最接近的顺风颜色。
    • color （string，必填）：任何CSS颜色(#fff, #fafafa, rgb(...), hsl(...)、命名颜色等）。
    • n （int，可选）：要返回的颜色数（默认值5，最大值50）。
    • excludeColors （string[]，可选）：要跳过的顺风颜色名称（例如。 ["white", "black", "neutral-950"]).
    • space （枚举，可选）：比较颜色空间(cmyk, gl, hcg, hcl, hsi, hsl, hsv, lab, lch, oklab, oklch, rgb；默认 lab).

示例提示

提示：“最接近youtube标志的5种顺风颜色是什么？”

答复：

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

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

相关 MCP