以 skill 自身的术语
基于 Tailwind CSS v4（2024 年以后）构建生产级设计系统。它讲解 CSS 优先的配置方式——app.css 中的 @theme 取代 tailwind.config.ts，用 OKLCH 编写语义化颜色 token，圆角与动画 token 的 keyframes 置于 @theme 内，通过 @custom-variant 声明基于 class 的深色模式，以及在 @layer base 中应用基础样式。
它还阐述了从品牌到语义到组件的 token 层级体系，涵盖基础样式、变体、尺寸、状态和覆盖项的组件架构，以及响应式且无障碍的组件模式。适用于构建组件库、在代码库中统一 UI 模式，或从 Tailwind v3 迁移的团队。
工作方式
- 01在 CSS 入口文件中导入 Tailwind
app.css 以单一的 @import 开头，而不是 v3 中的 @tailwind base/components/utilities 指令。
- 02在 @theme 下声明语义化 token 集合
background、foreground、primary、secondary、muted、accent、destructive、border、ring 和 card 均以 OKLCH 声明为颜色 token。
- 03添加带有对应 keyframes 的动画 token
--animate-fade-in 和 --animate-fade-out 运行时长为 0.2s，--animate-slide-in 和 --animate-slide-out 为 0.3s，每个都在 @theme 内声明了对应的 @keyframes 块。
- 04在 .dark 下覆盖相同的 token 名称
dark 代码块重新赋值每个 token，而不是引入新名称，对应 background、foreground、primary、secondary、muted、accent、destructive、border、ring、card 和 ring-offset。
- 05设置基础层默认值
@layer base 为每个元素应用 border-border，并为 body 设置主题化的背景色、前景色和抗锯齿效果。
- 06按层级顺序构建组件
组件依次经历基础样式、变体、尺寸、状态和覆盖项。