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正试图写入系统目录。使用以下方法之一：
- 用户拥有的全局目录（推荐） –无需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 将工作。
- 无全局安装 –克隆或安装该软件包（例如。
~/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进程在握手之前退出。常见原因：
- 从npm全局安装 –较旧的tarball可能不包括内置
dist/文件夹。重新安装最新版本，或按路径而不是tailwindcss-mcp命令：
"tailwindcss": {
"command": "node",
"args": ["/absolute/path/to/tailwindcss-mcp/dist/index.js"]
}（使用克隆仓库或安装包的路径；运行 npm run build 先到那里。)
- 启动时崩溃 –在终端中运行以查看错误：
tailwindcss-mcp或 node /path/to/tailwindcss-mcp/dist/index.js。打印到stderr的任何消息都会指向原因。
许可证
麻省理工学院