用途：帮助开发者用 Tailwind CSS v4 构建生产级设计系统，覆盖 CSS-first 配置、设计令牌、组件变体、响应式与无障碍。适用于创建组件库、实现令牌与主题、统一 UI 模式、从 v3 迁移到 v4、用原生 CSS 特性搭建暗色模式。注意该技能面向 Tailwind CSS v4（2024+），v3 项目需参考升级指南。
主要能力：以 @theme 在 CSS 中定义主题，替代 tailwind.config.ts；用 @import "tailwindcss" 替代 @tailwind base/components/utilities；用 @custom-variant dark (&:where(.dark, .dark )) 实现类名暗色模式；用 --color- 变量替代 theme.extend.colors；用 @theme 内的 @keyframes 配合 --animate-* 变量及 @starting-style 处理入场动画，替代 tailwindcss-animate。
令牌层级：品牌令牌（抽象）→ 语义令牌（用途）→ 组件令牌（具体），例如 oklch(45% 0.2 260) → --color-primary → bg-primary。语义令牌包含 background、foreground、primary、secondary、muted、accent、destructive、border、ring、card 等，并含 --radius-* 与 --animate-* 令牌。
使用方式：在 app.css 中 @import "tailwindcss"，于 @theme 内声明颜色、圆角与动画令牌，用 @custom-variant 定义暗色变体，在 .dark 中覆盖语义令牌，并在 @layer base 中设置基础样式（如 * { @apply border-border; }、body { @apply bg-background text-foreground antialiased; }）。组件架构遵循基础样式→变体→尺寸→状态→覆盖的顺序。
限制：资料未提供安装命令、依赖版本、CVA 具体 API、完整组件示例与无障碍实现细节；更详细的模式文档位于 references/details.md，需另行查阅。价格、平台与效果暂未提供。