tailwind-design-system

此技能为管理 Tailwind CSS v4 的现代设计系统提供了结构化的框架。专为需要在大型代码库中维护一致性样式，同时利用最新 CSS 优先功能的前端开发人员与 UI 工程师所设计。通过从传统配置文件转向 CSS 原生定义，此技能简化了标记、主题与复杂 UI 组件的建立过程。它确保您的设计系统在应用程序扩展时，依然保持高性能、高可访问性且易于维护。

• 使用 @theme 指令进行 CSS 优先配置，以取代传统的 tailwind.config.ts 文件。

• 使用 OKLCH 色彩空间进行高级语义化颜色标记管理，以改善色彩感知与一致性。

• 支持组件架构，包含用于管理复杂变体与状态的 CVA (Class Variance Authority)。

• 内置使用原生 @custom-variant 与现代 CSS 功能的深色模式支持。

• 整合至基础层级的标准化响应式模式与可访问性最佳实践。

• 在 @theme 定义内直接管理动画标记与关键帧。

• 当启动新的设计系统项目或将现有 Tailwind v3 代码库迁移至 v4 时，请使用此技能。

• 参考随附的映射表，快速将传统 v3 模式（如主题扩展或深色模式类策略）转换为现代 v4 的对应项。

• 遵循提供的架构，定义从品牌、语义到组件专用变量的标记阶层。

• 应用推荐的 CVA 模式来构建模块化、可重复使用的 UI 组件，例如按钮、输入框与对话框。

• 请注意，此技能严格针对 Tailwind CSS v4 环境进行优化；v3 用户在实施前应参阅官方迁移指南。