用途:帮助开发者用 Tailwind CSS v4 构建可扩展的设计系统,包括组件库、设计令牌与主题、响应式与无障碍组件,以及统一代码库中的 UI 模式,也覆盖 v3 到 v4 的迁移。
主要能力:采用 CSS-first 配置,用 @import "tailwindcss" 替代 @tailwind 指令,用 @theme 定义颜色、圆角、动画等令牌,用 @custom-variant 实现类名暗色模式。提供设计令牌层级(品牌→语义→组件)、CVA 组件变体、复合组件、表单组件、响应式网格与容器等模式,并包含 cn 工具函数与焦点环、禁用态工具。
使用方式:在 CSS 中通过 @theme 定义语义颜色(如 --color-primary)、半径与动画令牌,在 .dark 中覆盖暗色值;组件侧用 class-variance-authority 定义变体与尺寸,配合 cn 合并类名。示例命令与代码保持原样,如 @import "tailwindcss"、@theme、@custom-variant dark (&:where(.dark, .dark *))。
适用场景:创建组件库、实现设计令牌与主题、构建响应式无障碍组件、标准化 UI 模式、从 v3 迁移到 v4、用原生 CSS 特性设置暗色模式。
限制:该技能面向 Tailwind CSS v4(2024+),v3 项目需参考升级指南;资料未提供安装命令、收费、价格、平台与效果等信息。