tailwind-design-system-v4

用途

Tailwind Design System (v4) 用于构建生产级设计系统，基于 Tailwind CSS v4，涵盖 CSS 优先配置、设计令牌、组件变体、响应式模式与无障碍支持。

适用场景

• 使用 Tailwind v4 创建组件库
• 通过 CSS 优先配置实现设计令牌与主题
• 构建响应式且无障碍的组件
• 统一代码库中的 UI 模式
• 从 Tailwind v3 迁移到 v4
• 使用原生 CSS 特性设置深色模式

主要能力与 v4 关键变化

该技能针对 Tailwind CSS v4（2024 年及以后）。对于 v3 项目，需参考升级指南。

v3 与 v4 的模式对应关系如下：

• v3 使用 tailwind.config.ts，v4 使用 CSS 中的 @theme
• v3 使用 @tailwind base/components/utilities，v4 使用 @import "tailwindcss"
• v3 使用 darkMode: "class"，v4 使用 @custom-variant dark (&:where(.dark, .dark *))
• v3 使用 theme.extend.colors，v4 使用 @theme { --color-*: value }
• v3 使用 require("tailwindcss-animate")，v4 使用 @theme 中的 CSS @keyframes 配合 @starting-style 实现入场动画

使用方式

CSS 设置、组件模式与迁移相关内容参见 PATTERNS.md。

限制

该技能明确面向 Tailwind CSS v4（2024 年及以后），v3 项目需参考升级指南。资料未提供其他平台、收费、价格或效果方面的信息。