---

name: tailwind-ops description: "Tailwind CSS 工具类模式、响应式设计、组件模式、v4 迁移和配置。适用于：tailwind、tailwindcss、utility classes、responsive design、dark mode、tailwind v4、tailwind config、tw、container queries、@apply、prose、typography、animation。" license: MIT allowed-tools: "Read Write Bash" metadata: author: claude-mods related-skills: react-ops, vue-ops, astro-ops

Tailwind 操作指南

全面的 Tailwind CSS 模式，涵盖布局、响应式设计、组件、暗色模式、动画和 v4 迁移。

布局决策树

选择哪种布局方式？
│
├─ 单行或单列排列？
│  └─ 使用 Flexbox
│     ├─ 行：    class="flex items-center gap-4"
│     ├─ 列：    class="flex flex-col gap-4"
│     ├─ 换行：  class="flex flex-wrap gap-4"
│     └─ 推到末尾：class="flex" + 子元素 class="ml-auto"
│
├─ 二维网格（行和列）？
│  └─ 使用 CSS Grid
│     ├─ 等宽列：   class="grid grid-cols-3 gap-6"
│     ├─ 响应式网格：class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
│     ├─ 侧边栏：   class="grid grid-cols-[250px_1fr] gap-6"
│     ├─ 跨列：     子元素 class="col-span-2"
│     └─ 自动填充：  class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6"
│
├─ 组件应适应容器大小（非视口）？
│  └─ 使用容器查询（v3.2+ / v4 原生）
│     ├─ 父元素：class="@container"
│     └─ 子元素：class="@md:flex-row @lg:grid-cols-3"
│
└─ 居中内容？
   ├─ 水平居中块：class="mx-auto max-w-4xl"
   ├─ Flex 居中：  class="flex items-center justify-center"
   └─ Grid 居中：  class="grid place-items-center"

响应式断点

| 前缀 | 最小宽度 | 典型设备 | |------|----------|----------| | sm: | 640px | 大手机 | | md: | 768px | 平板 | | lg: | 1024px | 笔记本 | | xl: | 1280px | 桌面 | | 2xl: | 1536px | 大屏 |

移动优先：无前缀 = 所有尺寸，md: = 768px 及以上。

暗色模式

<!-- 手动切换 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">标题</h1>
  <p class="text-gray-600 dark:text-gray-400">内容</p>
</div>

常用组件模式

卡片

<div class="rounded-lg border bg-card p-6 shadow-sm">
  <h3 class="text-lg font-semibold">标题</h3>
  <p class="mt-2 text-sm text-muted-foreground">描述</p>
</div>

按钮

<button class="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
  按钮
</button>

输入框

<input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" />

动画

<!-- 过渡 -->
<div class="transition-all duration-300 hover:scale-105 hover:shadow-lg">

<!-- 动画 -->
<div class="animate-pulse">加载中...</div>
<div class="animate-spin h-5 w-5">旋转</div>
<div class="animate-bounce">弹跳</div>

Tailwind v4 变更

| v3 | v4 | |----|-----| | tailwind.config.js | CSS 中的 @theme | | @tailwind base | @import "tailwindcss" | | bg-opacity-50 | bg-black/50 | | text-[14px] | 相同（保留） |

附加资源

• ./references/component-patterns.md - 完整组件模式库
• ./references/v4-migration.md - v3 到 v4 迁移指南
• ./references/custom-plugins.md - 自定义插件开发