星战科技xingzhan.cloud
返回市场
顺风-mcp服务器

顺风-mcp服务器

作者：coppinaphil5 星标更新：2025-07-08
安装使用来源：spider==github.com

项目介绍

🎨 Tailwind MCP Server

<div align="center">

npm 版本 许可证: MIT Node.js 版本 MCP 兼容

首个最全面的 Tailwind CSS 模型上下文协议 (MCP) 服务器

生成组件 • 优化类 • 创建主题 • 获取最佳实践

安装 • 特性 • 使用 • 示例 • 贡献

</div>

🚀 特性

🎯 组件生成

生成带有变体、尺寸和框架支持的生产就绪 Tailwind 组件

  • UI 元素: 按钮、卡片、模态框、警告、徽章、下拉菜单、工具提示
  • 导航: 导航栏、侧边栏、面包屑、分页、标签
  • 布局: 英雄部分、页脚、网格布局、Flexbox 模式
  • 表单: 带有验证样式的完整表单组件
  • 数据展示: 表格、折叠面板、进度条

⚡ 智能优化

  • 类优化: 清理冗余类并合并冲突
  • 验证: 验证 Tailwind 类并提供改进建议
  • 性能提示: 获取关于包大小和优化的指导

📱 布局系统

  • 响应式布局: 移动优先的 Flexbox、网格和仪表板布局
  • 设计模式: 博客、电子商务、着陆页和仪表板模板
  • 断点策略: 全面的响应式设计指导

🎨 主题创建

  • 颜色调色板: 从品牌颜色生成一致的颜色系统
  • 排版: 创建一致的字体比例和层次结构
  • 设计系统: 完整的主题生成，包括间距、阴影、边框
  • 配置: 将主题导出为 tailwind.config.js 文件

🔧 开发者工具

  • CSS 转换: 将现有 CSS 转换为 Tailwind 类
  • 配置生成: 创建特定于框架的 Tailwind 配置
  • 最佳实践: 获取关于可访问性、性能和可维护性的指导
  • 插件推荐: 根据项目需求提供建议

🌐 框架支持

  • HTML - 使用 Tailwind 类的纯 HTML
  • React - 带有 TypeScript 支持的 JSX 组件
  • Vue - Vue.js 单文件组件
  • Svelte - Svelte 组件格式
  • Angular - Angular 模板格式

📦 安装

NPM 安装

npm install -g tailwind-mcp-server

手动安装

git clone https://github.com/yourusername/tailwind-mcp-server.git
cd tailwind-mcp-server
npm install

⚙️ 配置

Claude Desktop 设置

添加到你的 claude_desktop_config.json 中：

选项 1: 全局安装（推荐）

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

选项 2: 手动安装

{
  "m_服务器": {
    "tailwind-mcp-server": {
      "command": "node",
      "args": ["/path/to/tailwind-mcp-server/src/server.js"]
    }
  }
}

配置文件位置:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

🛠️ 可用工具

工具描述使用场景
generate_component生成 Tailwind 组件创建按钮、卡片、导航
optimize_classes清理类列表删除冗余项，合并冲突
validate_classes验证 Tailwind 类检查语法，获取建议
generate_layout创建响应式布局构建页面结构
create_theme生成设计系统创建颜色调色板、排版
generate_config创建 Tailwind 配置框架特定设置
convert_css_to_tailwind将 CSS 转换为 Tailwind迁移现有样式
get_responsive_patterns获取响应式模式移动优先设计指导
get_best_practices最佳实践指导性能、可访问性提示
suggest_plugins插件推荐查找合适的插件

📚 使用示例

🔲 生成现代按钮

{
  "component_type": "button",
  "variant": "primary",
  "size": "lg",
  "responsive": true,
  "dark_mode": true,
  "framework": "react"
}

输出:

const Button = ({ children, onClick, disabled = false }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 dark:bg-blue-500 dark:hover:bg-blue-600 sm:px-8 sm:py-4"
    >
      {children}
    </button>
  );
};

🎨 创建颜色主题

{
  "theme_type": "colors",
  "style": "modern",
  "brand_color": "#6366F1",
  "color_count": 9,
  "include_config": true
}

📱 生成响应式布局

{
  "layout_type": "dashboard",
  "complexity": "medium",
  "responsive": true,
  "content_areas": ["header", "sidebar", "main", "footer"]
}

⚡ 优化类

{
  "classes": "p-4 px-4 py-4 text-blue-500 text-blue-600 flex flex-row",
  "merge_conflicts": true,
  "remove_redundant": true,
  "suggest_alternatives": true
}

输出:

{
  "optimized_classes": "p-4 text-blue-600 flex",
  "removed_redundant": ["px-4", "py-4", "text-blue-500", "flex-row"],
  "suggestions": ["考虑使用 'space-x-*' 来设置 flex 项之间的间隙"]
}

🎯 组件展示

按钮

  • 变体: 主要、次要、轮廓、幽灵、链接
  • 尺寸: xs, sm, md, lg, xl
  • 状态: 悬停、焦点、激活、禁用
  • 特性: 加载状态、图标支持、响应式尺寸

卡片

  • 类型: 基础、提升、轮廓、交互
  • 特性: 标题、页脚、媒体支持、悬停效果
  • 布局: 垂直、水平、网格排列

导航

  • 组件: 导航栏、侧边栏、面包屑、分页
  • 特性: 移动响应、下拉菜单、活动状态
  • 可访问性: 键盘导航、ARIA 标签

表单

  • 元素: 输入框、选择框、文本区域、复选框、单选框
  • 特性: 验证状态、帮助文本、浮动标签
  • 布局: 行内、堆叠、网格排列

🏗️ 布局示例

仪表板布局

<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
  <!-- 头部 -->
  <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
    <!-- 头部内容 -->
  </header>
  
  <div class="flex">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white dark:bg-gray-800 shadow-sm">
      <!-- 侧边栏内容 -->
    </aside>
    
    <!-- 主要内容 -->
    <main class="flex-1 p-6">
      <!-- 页面内容 -->
    </main>
  </div>
</div>

英雄部分

<section class="relative bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-800 dark:to-blue-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
    <div class="text-center">
      <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">
        美丽的 Tailwind 组件
      </h1>
      <p class="mt-6 text-lg leading-8 text-purple-100">
        使用 AI 辅助生成、优化和完善你的 Tailwind CSS
      </p>
    </div>
  </div>
</section>

🎨 主题示例

现代颜色调色板

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        }
      }
    }
  }
}

排版比例

fontSize: {
  'xs': ['0.75rem', { lineHeight: '1rem' }],
  'sm': ['0.875rem', { lineHeight: '1.25rem' }],
  'base': ['1rem', { lineHeight: '1.5rem' }],
  'lg': ['1.125rem', { lineHeight: '1.75rem' }],
  'xl': ['1.25rem', { lineHeight: '1.75rem' }],
  '2xl': ['1.5rem', { lineHeight: '2rem' }],
  '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
  '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
}

📋 最佳实践

性能

  • 清理未使用的类 通过正确的内容配置
  • 谨慎使用 @apply 指令 以保持可维护性
  • 为生产优化 通过最小化和压缩
  • 利用 JIT 模式 以实现更快的构建和更小的包

响应式设计

  • 移动优先方法 并逐步增强
  • 一致的断点 在整个设计系统中
  • 触摸友好目标 （至少 44px 触摸目标）
  • 灵活的网格系统 适用于各种内容类型

可访问性

  • 语义 HTML 结构和适当的标题
  • 颜色对比度 符合 WCAG 指南
  • 键盘导航 支持所有交互元素
  • 屏幕阅读器 兼容性，带有适当的 ARIA 标签

可维护性

  • 组件化架构 以提高可重用性
  • 设计令牌 用于一致的主题
  • 文档 自定义实用程序和组件
  • 版本控制 配置更改

🔌 插件推荐

必备插件

  • @tailwindcss/forms - 更好的表单样式
  • @tailwindcss/typography - 丰富的内容样式
  • @tailwindcss/aspect-ratio - 响应式媒体

专业插件

  • @tailwindcss/line-clamp - 文本截断
  • tailwindcss-animate - 动画实用工具
  • @tailwindcss/container-queries - 基于容器的响应式设计

🤝 贡献

我们欢迎贡献！以下是开始的方法：

  1. 分叉仓库
  2. 创建功能分支: git checkout -b feature/amazing-feature
  3. 进行更改 并添加测试（如果适用）
  4. 提交更改: git commit -m '添加精彩功能'
  5. 推送到分支: git push origin feature/amazing-feature
  6. 打开拉取请求

开发环境设置

git clone https://github.com/yourusername/tailwind-mcp-server.git
cd tailwind-mcp-server
npm install
npm run dev

贡献领域

  • 额外的组件类型
  • 更多布局模式
  • 增强的优化算法
  • 更好的 CSS 到 Tailwind 转换
  • 扩展的主题生成
  • 更多框架支持

📄 许可证

本项目采用 MIT 许可证 - 详情见 LICENSE 文件。

🙋‍♂️ 支持

🌟 展示你的支持

如果这个项目对你有帮助，请考虑：

  • ⭐ 关注仓库
  • 🐛 报告错误或请求功能
  • 🤝 贡献代码库
  • 📢 分享给其他开发者
<div align="center">

为 Tailwind CSS 社区用心打造

</div>