Tailwind Design System（v4）是一个用于构建生产级设计系统的技能，基于 Tailwind CSS v4，涵盖 CSS-first 配置、设计令牌、组件变体、响应式模式与无障碍访问。该技能明确面向 Tailwind CSS v4（2024 年及以后版本）；对于 v3 项目，需参考升级指南。
一、适用场景 该技能适用于以下情况：使用 Tailwind v4 创建组件库；通过 CSS-first 配置实现设计令牌与主题；构建响应式且无障碍的组件；在代码库中统一 UI 模式；从 Tailwind v3 迁移到 v4；使用原生 CSS 特性设置深色模式。
二、v4 关键变化 技能列出了 v3 与 v4 的模式对照：v3 使用 tailwind.config.ts，v4 使用 CSS 中的 @theme；v3 使用 @tailwind base/components/utilities，v4 使用 @import "tailwindcss"；v3 使用 darkMode: "class"，v4 使用 @custom-variant dark (&:where(.dark, .dark ))；v3 使用 theme.extend.colors，v4 使用 @theme { --color-: value }；v3 使用 require("tailwindcss-animate")，v4 使用 @theme 中的 CSS @keyframes 配合 @starting-style 实现入场动画。
三、快速开始 技能提供了一个 app.css 示例，展示 Tailwind v4 的 CSS-first 配置：通过 @import "tailwindcss" 引入，在 @theme 中定义语义化颜色令牌（使用 OKLCH 以获得更好的色彩感知），包括 background、foreground、primary、secondary、muted、accent、destructive、border、ring、card 等，以及 ring-offset、圆角令牌（--radius-sm/md/lg/xl）和动画令牌（--animate-fade-in、--animate-fade-out、--animate-slide-in、--animate-slide-out），并在 @theme 内定义对应的 @keyframes。随后使用 @custom-variant dark 定义基于 class 的深色模式变体，并在 .dark 选择器中覆盖颜色令牌。最后在 @layer base 中设置基础样式，如 * { @apply border-border; } 和 body { @apply bg-background text-foreground antialiased; }。
四、核心概念
- 设计令牌层级：品牌令牌（抽象）→ 语义令牌（用途）→ 组件令牌（具体）。示例：oklch(45% 0.2 260) → --color-primary → bg-primary。
- 组件架构：基础样式 → 变体 → 尺寸 → 状态 → 覆盖。
五、实现模式 技能给出了多种模式：
- CVA（Class Variance Authority）组件：以 button.tsx 为例，使用 cva 定义基础样式与 variant（default、destructive、outline、secondary、ghost、link）和 size（default、sm、lg、icon），并说明 React 19 中无需 forwardRef，ref 作为普通 prop 传递。
- 复合组件（React 19）：以 card.tsx 为例，导出 Card、CardHeader、CardTitle、CardDescription、CardContent、CardFooter。
- 表单组件：以 input.tsx 和 label.tsx 为例，Input 支持 error 属性并设置 aria-invalid 与 aria-describedby，错误信息使用 role="alert"；并展示与 React Hook Form + Zod 的配合用法。
- 响应式网格系统：以 grid.tsx 为例，使用 cva 定义 cols（1-6）与 gap（none、sm、md、lg、xl），并提供 Container 组件，size 支持 sm、md、lg、xl、2xl、full。
- 原生 CSS 动画（v4）：在 @theme 中定义 --animate-dialog-in/out 与对应 @keyframes，并使用原生 @starting-style 实现 popover 动画；以 dialog.tsx 为例，使用 Radix UI Dialog 原语配合 data-[state=open]/data-[state=closed] 的动画类。
- 使用 CSS 的深色模式（v4）：以 ThemeProvider.tsx 为例，提供 theme、setTheme、resolvedTheme，支持 'dark' | 'light' | 'system'，使用 localStorage 存储，默认 storageKey 为 'theme'。
六、限制 资料中未提供该技能的安装命令、收费方式、价格、平台支持范围或具体效果数据，这些信息暂未提供。资料内容在 ThemeProvider 的 useEffect 处截断，后续内容暂未提供。