⚡

TailwindCSS样式设计技能Skill tailwind-css

Tailwind CSS样式设计专家指南，专注于移动优先响应式设计、自定义主题和实用优先方法。提供组件样式、响应式布局、深色模式支持、可访问性优化和性能调优。适用于前端开发、UI组件设计、仪表板布局、Web应用界面开发。关键词：Tailwind CSS, 移动优先设计, 响应式布局, 深色模式, 实用优先, 组件样式, 前端开发, UI设计, 可访问性, 性能优化

前端开发 0 次安装 0 次浏览 更新于 3/2/2026

name: tailwind-css description: | 当使用Tailwind CSS进行UI组件或布局样式设计时使用 - 移动优先设计、响应式工具、自定义主题或组件样式。 不适用于纯CSS、CSS-in-JS（styled-components）或非Tailwind框架。 触发词：“样式组件”、“响应式设计”、“移动优先”、“深色主题”、“tailwind类”、“仪表板网格”。

Tailwind CSS 技能

概述

Tailwind CSS样式设计的专家指导，采用移动优先的响应式设计、自定义主题和实用优先的方法。专注于可访问性、深色模式和性能优化。

适用场景

此技能在用户请求以下内容时触发：

  • 样式设计：“样式化这个KPI卡片”、“按钮组件样式”、“设计表单”
  • 响应式：“移动优先布局”、“响应式仪表板”、“带断点的网格”
  • 主题：“自定义深色主题”、“扩展tailwind主题”、“配色方案”
  • 布局：“仪表板网格”、“卡片布局”、“灵活容器”

核心规则

1. 移动优先设计

// ✅ 良好：移动优先渐进增强
<div className="w-full px-4 py-2 sm:w-1/2 sm:px-6 md:w-1/3 md:px-8 lg:w-1/4">
  <KPICard />
</div>

// 断点：
// sm: 640px   - 小平板/手机
// md: 768px   - 平板
// lg: 1024px  - 桌面
// xl: 1280px  - 大屏幕
// 2xl: 1536px - 超大屏幕

要求：

  • 移动端基础样式（无前缀）
  • 使用sm:、md:、lg:前缀进行渐进增强
  • 从移动布局开始，为大屏幕增强
  • 使用响应式断点：sm:640px、md:768px、lg:1024px

2. 响应式工具

// ✅ 良好：流畅的响应式布局
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  {items.map(item => <Item key={item.id} item={item} />)}
</div>

// ✅ 良好：响应式间距
<div className="p-4 sm:p-6 md:p-8 lg:p-12">
  内容
</div>

// ✅ 良好：容器查询（如果需要）
<div className="@container">
  <div className="@lg:grid-cols-2">
    嵌套响应式内容
  </div>
</div>

要求：

  • 为移动端使用流畅工具（w-full、flex-1）
  • 为大屏幕添加断点（sm:、md:、lg:）
  • 考虑容器查询用于嵌套响应式组件
  • 在多个断点测试布局（375px、768px、1024px、1440px）

3. 自定义主题

// tailwind.config.ts
export default {
  darkMode: 'class', // 或 'media'
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        erp: {
          'card': '#ffffff',
          'card-dark': '#1f2937',
        },
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

要求：

  • 在tailwind.config.ts中扩展主题，不要覆盖
  • 使用语义化名称（primary、secondary、accent）
  • 在主题中定义自定义颜色、字体、间距
  • 支持CSS变量用于动态主题
  • 使用darkMode: 'class'用于手动深色模式切换

4. 组件样式

// ✅ 良好：实用优先方法
export const Button = ({ variant, size, children }) => (
  <button className={`
    font-semibold rounded-lg
    ${variant === 'primary' ? 'bg-blue-500 text-white hover:bg-blue-600' : 'bg-gray-200 text-gray-800 hover:bg-gray-300'}
    ${size === 'sm' ? 'px-3 py-1 text-sm' : 'px-4 py-2'}
    transition-colors duration-200
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  `}>
    {children}
  </button>
);

// ✅ 良好：CVA或class-variance-authority用于变体
import { cva } from 'class-variance-authority';

const buttonVariants = cva(
  'font-semibold rounded-lg transition-colors',
  {
    variants: {
      variant: {
        primary: 'bg-blue-500 text-white hover:bg-blue-600',
        secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
      },
      size: {
        sm: 'px-3 py-1 text-sm',
        md: 'px-4 py-2',
      },
    },
  }
);

要求：

  • 优先使用内联实用类而非自定义CSS
  • 谨慎使用@apply（仅用于重复模式）
  • 使用CVA或类似库提取复杂变体
  • 遵循shadcn/ui模式实现一致样式
  • 使用模板字面量处理条件类

输出要求

代码文件

  1. 组件样式：

    • JSX/TSX中的内联实用类
    • 变体的条件类（深色/浅色、尺寸）
    • 焦点状态和过渡效果

  2. 配置：

    • 用于自定义主题的tailwind.config.ts更新
    • 用于全局样式和指令的globals.css

  3. 深色模式支持：

    <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  带深色模式的内容
</div>

集成要求

  • shadcn/ui：遵循shadcn设计令牌和模式
  • 可访问性：WCAG 2.1 AA兼容颜色、focus-visible状态
  • 性能：启用JIT模式、清除未使用类
  • 国际化：需要时支持RTL布局

文档

  • PHR：为样式决策创建提示历史记录
  • ADR：记录主题决策（配色方案、断点）
  • 注释：记录非明显的实用类组合

工作流程

  1. 分析布局需求

    • 识别移动端断点
    • 确定响应式需求
    • 检查深色模式要求

  2. 应用移动优先样式

    • 无断点的基础样式
    • 为大屏幕渐进增强
    • 在移动视口测试（375px）

  3. 添加响应式断点

    • sm:用于平板（640px）
    • md:用于平板（768px）
    • lg:用于桌面（1024px）
    • 在每个断点测试

  4. 应用深色模式

    • 为颜色/背景添加dark:变体
    • 在浅色和深色模式测试
    • 确保两种模式的对比度

  5. 验证可访问性

    • 检查颜色对比度（最低4.5:1）
    • 为交互元素添加focus-visible状态
    • 确保移动端触摸目标44px+

质量检查清单

完成任何样式设计前：

  • [ ] 移动端无水平滚动：布局适配375px无水平滚动
  • [ ] 触摸目标：移动端所有交互元素44px+
  • [ ] 深色/浅色变体：使用dark:类支持深色模式
  • [ ] 实用优先：最少自定义CSS，使用Tailwind实用类
  • [ ] 清除未使用：生产环境无未使用实用类
  • [ ] 焦点状态：所有交互元素有focus-visible或focus:ring
  • [ ] 对比度：WCAG 2.1 AA兼容颜色（文本4.5:1）
  • [ ] 响应式断点：在sm/md/lg断点测试
  • [ ] 一致间距：使用Tailwind间距比例（0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64）
  • [ ] 过渡效果：添加transition-*类实现平滑状态变化

常见模式

KPI卡片（移动优先）

export const KPICard = ({ title, value, trend, loading }) => (
  <div className="
    w-full p-4 bg-white dark:bg-gray-800
    rounded-lg shadow-sm border border-gray-200 dark:border-gray-700
    sm:p-6 md:p-8
  ">
    {loading ? (
      <Skeleton className="h-20" />
    ) : (
      <>
        <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">
          {title}
        </h3>
        <p className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
          {value}
        </p>
        {trend && (
          <span className={`
            inline-flex items-center mt-2 text-sm
            ${trend > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}
          `}>
            {trend > 0 ? '↑' : '↓'} {Math.abs(trend)}%
          </span>
        )}
      </>
    )}
  </div>
);

响应式仪表板网格

export const DashboardGrid = ({ children }) => (
  <div className="
    w-full grid gap-4
    grid-cols-1
    sm:grid-cols-2
    md:grid-cols-3
    lg:grid-cols-4
    xl:grid-cols-5
    p-4
  ">
    {children}
  </div>
);

响应式布局表单

export const ResponsiveForm = () => (
  <form className="
    w-full max-w-lg mx-auto
    p-4 sm:p-6 md:p-8
    bg-white dark:bg-gray-800
    rounded-lg shadow-md
  ">
    <div className="space-y-4 sm:space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          姓名
        </label>
        <input className="
          w-full px-4 py-2 text-base
          border border-gray-300 dark:border-gray-600
          rounded-lg
          bg-white dark:bg-gray-700
          text-gray-900 dark:text-white
          focus:ring-2 focus:ring-blue-500 focus:border-blue-500
        " />
      </div>
      <button className="
        w-full sm:w-auto
        px-6 py-3 text-base font-semibold
        bg-blue-500 hover:bg-blue-600
        text-white rounded-lg
        transition-colors duration-200
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
      ">
        提交
      </button>
    </div>
  </form>
);

深色模式切换按钮

export const DarkModeToggle = ({ isDark, onToggle }) => (
  <button
    onClick={onToggle}
    className="
      p-2 rounded-lg
      bg-gray-200 dark:bg-gray-700
      hover:bg-gray-300 dark:hover:bg-gray-600
      text-gray-800 dark:text-gray-200
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-blue-500
    "
    aria-label={isDark ? '切换到浅色模式' : '切换到深色模式'}
  >
    {isDark ? '☀️' : '🌙'}
  </button>
);

Tailwind配置最佳实践

断点策略

// 推荐的断点配置
screens: {
  'xs': '475px',  // 超小手机
  'sm': '640px',  // 小平板/手机
  'md': '768px',  // 平板
  'lg': '1024px', // 桌面
  'xl': '1280px', // 大屏幕
  '2xl': '1536px', // 超大屏幕
}

颜色系统

// 语义化颜色命名
colors: {
  primary: { 50: '...', 500: '...', 900: '...' },
  success: { 50: '...', 500: '...', 900: '...' },
  warning: { 50: '...', 500: '...', 900: '...' },
  error:   { 50: '...', 500: '...', 900: '...' },
}

间距比例

// 使用Tailwind比例：0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96
// 1 = 0.25rem (4px), 4 = 1rem (16px), 8 = 2rem (32px)
spacing: {
  '128': '32rem',
  '144': '36rem',
}

可访问性指南

  • 颜色对比度：文本最低4.5:1，大文本3:1
  • 焦点状态：始终包含focus:ring-2或focus-visible
  • 触摸目标：移动端交互元素最小44x44px
  • 跳过链接：为键盘用户添加sr-only跳过链接
  • ARIA标签：为纯图标按钮使用aria-label

性能优化

  1. JIT模式：Tailwind CSS 3+默认启用
  2. 清除未使用：生产环境仅保留使用类
  3. CSS压缩：Tailwind CLI或PostCSS优化
  4. 内联关键CSS：提取首屏内容的关键CSS
  5. 懒加载组件：代码分割重型组件

参考