AI导哈

TailwindCSS MCP 服务

TailwindCSS MCP 服务器，为 AI 助手提供上下文和工具，以建议和验证实用类，并读取当前主题。

  • by kush1nado
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 kush1nado/tailwindcss-mcp

使用说明

TailwindCSS MCP服务器

一 主控程序 Tailwind CSS的（模型上下文协议）服务器。它为AI助手提供了上下文和工具来建议和验证实用程序类，并阅读当前主题，因此您不必手动查找或粘贴类。

特性

  • 建议等级 –从简短的描述中建议顺风实用程序类（例如“带填充和圆角的红色按钮”）。
  • validate_classes –检查类名列表，找出哪些是有效的，哪些是未知的。
  • get_theme –返回顺风主题（或类似的部分 colors, spacing, screens)JSON格式。
  • 资源：tailwind://theme –将当前主题作为JSON资源读取以获取上下文。

主题和类集是从默认的Tailwind v3配置或项目的 tailwind.config.* 当提供路径时。通过静态主题参考对Tailwind v4的可选支持(TAILWIND_VERSION=4).

安装

npm install -g tailwindcss-mcp
# or
pnpm add -g tailwindcss-mcp

如果你得到 权限被拒绝 （权限被拒绝）全局安装时，npm正试图写入系统目录。使用以下方法之一：

  1. 用户拥有的全局目录（推荐） –无需sudo即可安装全局变量：

    mkdir -p ~/.npm-global
npm config set prefix ~/.npm-global

    添加到您的 ~/.zshrc （或 ~/.bashrc): export PATH="$HOME/.npm-global/bin:$PATH"，然后运行 source ~/.zshrc之后， npm install -g tailwindcss-mcp 将工作。

  2. 无全局安装 –克隆或安装该软件包（例如。 ~/dev/tailwindcss-mcp)，跑 npm install && npm run build，并在游标中指向该路径：

    "command": "node",
"args": ["/Users/you/dev/tailwindcss-mcp/dist/index.js"]

来源：

git clone https://github.com/kush1nado/tailwindcss-mcp.git
cd tailwindcss-mcp
npm install
npm run build

配置

光标

在Cursor MCP设置中添加服务器（例如。 设置→ MCP 或 .cursor/mcp.json).

如果全局安装：

{
  "mcpServers": {
    "tailwindcss": {
      "command": "tailwindcss-mcp"
    }
  }
}

或者直接运行构建文件：

{
  "mcpServers": {
    "tailwindcss": {
      "command": "node",
      "args": ["/path/to/tailwindcss-mcp/dist/index.js"]
    }
  }
}

具有可选的项目配置路径（目录或路径 tailwind.config.js):

{
  "mcpServers": {
    "tailwindcss": {
      "command": "node",
      "args": ["/path/to/tailwindcss-mcp/dist/index.js", "--config=/path/to/your/project"]
    }
  }
}

或者通过环境：

{
  "mcpServers": {
    "tailwindcss": {
      "command": "node",
      "args": ["/path/to/tailwindcss-mcp/dist/index.js"],
      "env": {
        "TAILWIND_CONFIG_PATH": "/path/to/your/project"
      }
    }
  }
}

克劳德桌面

在Claude桌面配置中（例如。 ~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：

{
  "mcpServers": {
    "tailwindcss": {
      "command": "node",
      "args": ["/path/to/tailwindcss-mcp/dist/index.js"]
    }
  }
}

可选环境变量

  • 尾风配置路径 –项目目录或路径 tailwind.config.js / tailwind.config.mjs /等等。当每次通话都没有时使用 configPath 已通过。
  • 顺风_版本 – 3 （默认）或 4.使用 4 用于Tailwind v4静态主题参考 resolveConfig 不可用。

你也可以通过 --config=/path 作为启动服务器时的单个参数。

配置文件格式

支持的配置文件： tailwind.config.js, tailwind.config.cjs, tailwind.config.mjs, tailwind.config.ts.为 顺风配置ts，Node必须能够运行TypeScript（例如通过ts节点或tsx）。如果用plain启动服务器 node dist/index.js一 .ts config将不会加载，服务器将使用默认主题。更喜欢 .js / .cjs / .mjs，或使用以下命令运行服务器 tsx 或 ts-node 如果需要TypeScript配置，请传递项目路径。

工具示例

  • 建议等级

    • description：例如。 "red button with padding and rounded corners"
    • 可选的 configPath 对于这个电话。

  • validate_classes

    • classes：以空格分隔的类名字符串或数组。
    • 可选的 configPath.

  • get_theme

    • 可选的 section: colors, spacing, screens, borderRadius, fontFamily, fontSize, boxShadow.
    • 可选的 configPath.

故障排除

游标中的“连接已关闭”/“未找到服务器信息” –MCP进程在握手之前退出。常见原因：

  1. 从npm全局安装 –较旧的tarball可能不包括内置 dist/ 文件夹。重新安装最新版本，或按路径而不是 tailwindcss-mcp 命令：

    "tailwindcss": {
  "command": "node",
  "args": ["/absolute/path/to/tailwindcss-mcp/dist/index.js"]
}

    （使用克隆仓库或安装包的路径；运行 npm run build 先到那里。)

  2. 启动时崩溃 –在终端中运行以查看错误：

    tailwindcss-mcp

    或 node /path/to/tailwindcss-mcp/dist/index.js。打印到stderr的任何消息都会指向原因。

许可证

麻省理工学院

相关 MCP