TailwindCSS MCP Server

TailwindCSS MCP服务器

一个全面的模型上下文协议（MCP）服务器，提供TailwindCSS实用程序、文档、转换工具和模板生成功能。该服务器使AI助手能够通过智能工具和实时协助来帮助TailwindCSS开发。

🚀 特性

信息工具（4个工具）

• get_tailwind_utilities -按类别、属性或搜索检索TailwindCSS实用程序类
• get_tailwind_colors -使用所有色调访问完整的TailwindCSS调色板
• get_tailwind_config_guide -获取不同框架的配置指南
• search_tailwind_docs -使用智能过滤搜索TailwindCSS文档

行动工具（4个工具）

• install_tailwind -为任何框架生成安装命令和配置
• convert_css_to_tailwind -将传统CSS转换为TailwindCSS实用程序类
• generate_color_palette -从基础颜色创建具有多种色调的自定义调色板
• generate_component_template -使用TailwindCSS类生成HTML组件模板

支持的框架

• 反应 （创建React应用程序，Next.js）
• 视图 （Vue 3，Nuxt.js）
• Angular
• Svelte/SvelteKit
• 拉瑞维尔
• 快
• 普通JavaScript/HTML

📦 安装

使用npm（推荐）

npm install -g tailwindcss-mcp-server

直接使用该软件包

npx tailwindcss-mcp-server

地方发展

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

⚙️ 配置

克劳德桌面

添加到您的Claude Desktop配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%/Claude/claude_desktop_config.json

选项1：使用全局安装

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

选项2：使用npx

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

选项3：使用本地构建

{
  "mcpServers": {
    "tailwindcss-server": {
      "command": "/path/to/tailwindcss-mcp/build/index.js"
    }
  }
}

克劳德代码

使用npx添加MCP服务器

claude mcp add tailwindcss-mcp-server -- npx tailwindcss-mcp-server

Windsurf IDE

添加到您的 ./windsurf/mcp_servers.json:

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

光标IDE

添加到您的 .cursor/mcp.json:

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

🛠️ 工具参考

信息工具

get_tailwind_utilities

使用灵活的过滤选项检索TailwindCSS实用程序类。

参数：

• category （可选）：按类别筛选（例如，“布局”、“排版”、“颜色”）
• property （可选）：按CSS属性过滤（例如，“边距”、“颜色”、“字体大小”）
• search （可选）：搜索词以查找特定实用程序

示例用法：

// Get all layout utilities
get_tailwind_utilities({ category: "layout" })

// Get margin-related utilities
get_tailwind_utilities({ property: "margin" })

// Search for flex utilities
get_tailwind_utilities({ search: "flex" })

get_tailwind_colors

访问TailwindCSS调色板，获取完整的色调信息。

参数：

• colorName （可选）：特定颜色名称（例如，“蓝色”、“红色”）
• includeShades （可选）：包括所有色调（默认值：true）

示例用法：

// Get all colors with shades
get_tailwind_colors({ includeShades: true })

// Get specific color information
get_tailwind_colors({ colorName: "blue" })

get_tailwind_config_guide

获取不同框架的配置指南和最佳实践。

参数：

• topic （可选）：配置主题（例如，“安装”、“定制”）
• framework （可选）：目标框架（例如，'react'、'vue'、'nextjs'）

示例用法：

// Get React-specific configuration
get_tailwind_config_guide({ framework: "react" })

// Get customization guides
get_tailwind_config_guide({ topic: "customization" })

search_tailwind_docs

使用智能过滤搜索TailwindCSS文档。

参数：

• query （必填）：搜索查询TailwindCSS文档
• category （可选）：按文档类别筛选
• limit （可选）：限制结果数量（默认值：10）

示例用法：

// Search for responsive design information
search_tailwind_docs({
  query: "responsive design",
  limit: 5
})

// Search in specific category
search_tailwind_docs({
  query: "dark mode",
  category: "customization"
})

行动工具

install_tailwind

为任何框架生成完整的安装命令和配置文件。

参数：

• framework （必填）：目标框架（“反应”、“nextjs”、“vue”、“vite”、“laravel”、“棱角”、“苗条”）
• packageManager （可选）：包管理器（'npm'、'yarn'、'pnpm'、'bun'）-默认值：'npm'
• includeTypescript （可选）：包含TypeScript配置（默认值：false）

示例用法：

// Install for Next.js with npm
install_tailwind({
  framework: "nextjs",
  packageManager: "npm"
})

// Install for React with TypeScript and yarn
install_tailwind({
  framework: "react",
  packageManager: "yarn",
  includeTypescript: true
})

convert_css_to_tailwind

使用智能建议将传统CSS转换为TailwindCSS实用程序类。

参数：

• css （必填）：转换为TailwindCSS实用程序的CSS代码
• mode （可选）：输出格式（“类”、“内联”、“组件”）-默认值：“类”

示例用法：

// Convert CSS to utility classes
convert_css_to_tailwind({
  css: ".button { padding: 1rem; background-color: #3B82F6; color: white; }"
})

// Convert with inline format
convert_css_to_tailwind({
  css: ".card { margin: 16px; border-radius: 8px; }",
  mode: "inline"
})

// Convert for @apply directive
convert_css_to_tailwind({
  css: ".component { display: flex; justify-content: center; }",
  mode: "component"
})

generate_color_palette

从基础颜色创建具有多个色调的自定义调色板。

参数：

• baseColor （必需）：十六进制、rgb或hsl格式的基色
• name （必填）：调色板的名称
• shades （可选）：阴影值数组（默认值：\[50、100、200、300、400、500、600、700、800、900、950\]）

示例用法：

// Generate brand color palette
generate_color_palette({
  baseColor: "#6366F1",
  name: "brand"
})

// Generate custom shades
generate_color_palette({
  baseColor: "rgb(59, 130, 246)",
  name: "primary",
  shades: [100, 300, 500, 700, 900]
})

// Generate from HSL
generate_color_palette({
  baseColor: "hsl(217, 91%, 60%)",
  name: "accent"
})

generate_component_template

使用TailwindCSS类和自定义建议生成HTML组件模板。

参数：

• componentType （必填）：组件类型（“按钮”、“卡片”、“表格”、“导航栏”、“模态”、“警报”、“徽章”、“面包屑”）
• style （可选）：视觉风格（“简约”、“现代”、“俏皮”）-默认：“现代”
• darkMode （可选）：包括暗模式支持（默认值：false）
• responsive （可选）：包括响应式设计类（默认值：true）

示例用法：

// Generate a modern button
generate_component_template({
  componentType: "button",
  style: "modern",
  responsive: true
})

// Generate a modal with dark mode
generate_component_template({
  componentType: "modal",
  style: "minimal",
  darkMode: true
})

// Generate a playful card component
generate_component_template({
  componentType: "card",
  style: "playful",
  responsive: true
})

🎯 用例

1.学习TailwindCSS

• 按类别或属性探索实用程序类
• 了解颜色系统和命名约定
• 获取框架的配置示例
• 在文档中搜索特定概念

2.转换现有CSS

• 将传统CSS转换为现代TailwindCSS实用程序
• 获取不支持属性的建议
• 学习常见CSS模式的TailwindCSS等价物
• 优化现有样式表

3.设计系统创建

• 生成与您的品牌相匹配的自定义调色板
• 创建一致的组件模板
• 导出CSS或JavaScript的颜色变量
• 保持项目之间的设计一致性

4.框架集成

• 获取特定于框架的安装指南
• 设置支持TypeScript的TailwindCSS
• 配置构建工具和开发工作流
• 学习技术栈的最佳实践

🔧 发展

先决条件

• Node.js 18+
• npm、yarn或pnpm

设置

# Clone the repository
git clone https://github.com/CarbonoDev/tailwindcss-mcp-server.git
cd tailwindcss-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

# Start development with watch mode
npm run watch

测试

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

调试

使用MCP检查器进行调试和开发：

npm run inspector

这将启动检查器，并为基于浏览器的调试提供一个URL。

📊 服务器功能

• 实时文档：访问最新的TailwindCSS文档
• 智能转换：准确地将CSS转换为TailwindCSS并给出建议
• 框架集成：支持所有主要前端框架
• 颜色管理：具有色调变体的高级调色板生成
• 模板生成：具有自定义选项的即用型组件模板
• 性能优化：高效的缓存和服务架构
• 错误处理：全面的错误处理和有用的消息
• 类型安全：具有正确类型的完整TypeScript实现

🤝 贡献

1. 分叉存储库
2. 创建要素分支
3. 通过测试进行更改
4. 确保所有测试通过
5. 提交拉取请求

📄 许可证

MIT许可证-有关详细信息，请参阅许可证文件。

🔗 链接

• TailwindCSS官方文档
• 模型上下文协议
• 克劳德桌面
• MCP检查员