用途：Tailwind Design System（v4）用于以 Tailwind CSS v4 构建生产级设计系统，包括 CSS-first 配置、设计令牌、组件变体、响应式模式与无障碍支持。该技能面向 Tailwind CSS v4（2024 年以后）；v3 项目需参考升级指南。
适用时机：创建基于 Tailwind v4 的组件库；用 CSS-first 配置实现设计令牌与主题；构建响应式且无障碍的组件；统一代码库中的 UI 模式；从 Tailwind v3 迁移到 v4；用原生 CSS 特性设置暗色模式。
主要能力与关键变化：v4 用 CSS 中的 @theme 取代 tailwind.config.ts；用 @import "tailwindcss" 取代 @tailwind base/components/utilities；用 @custom-variant dark (&:where(.dark, .dark )) 取代 darkMode: "class"；用 @theme { --color-: value } 取代 theme.extend.colors；并支持在 @theme 中定义 CSS @keyframes，配合 @starting-style 实现入场动画。
核心概念：设计令牌层级为品牌令牌→语义令牌→组件令牌，例如 oklch(45% 0.2 260) → --color-primary → bg-primary；组件架构遵循基础样式→变体→尺寸→状态→覆盖。
使用方式（模式）：可在 app.css 中通过 @theme 定义语义颜色（如 --color-background、--color-foreground、--color-primary、--color-destructive 等，使用 OKLCH）、圆角与动画令牌，并用 .dark 覆盖实现暗色模式；组件可用 CVA（class-variance-authority）定义变体（如 Button 的 default/destructive/outline/secondary/ghost/link 与尺寸），React 19 中 ref 作为普通 prop 无需 forwardRef；复合组件（Card/CardHeader/CardTitle/CardDescription/CardContent/CardFooter）；表单组件（Input、Label）配合 react-hook-form 与 Zod；响应式 Grid 与 Container 组件；原生 CSS 动画（@starting-style 与 [popover]）；以及 ThemeProvider 实现主题切换。
限制与说明：资料明确该技能针对 Tailwind CSS v4；v3 需参考升级指南。关于收费、价格、平台支持范围、安装命令及具体效果等事实暂未提供。