用途：指导在 Tailwind CSS v4 中编写按钮和组件样式，决定何时保持纯工具类、何时用 CVA 或 tailwind-variants 做变体抽象。
主要能力与用法：核心原则是优先在标记中直接使用工具类，只有 3 个以上变体时才抽象。v4 采用 CSS 优先配置，取消 tailwind.config.js，通过 @import "tailwindcss"; 和 @theme 定义设计令牌（如 --color-brand-primary、--font-sans、--radius-button）。@theme 的颜色变量既生成工具类又暴露为 CSS 变量。自动模板发现会遵循 .gitignore。官方称 Oxide 引擎让全量构建快 3.5 倍、增量快 8 倍。
抽象选择：1 至 2 个变体、原型或简单组件用纯工具类，零额外体积；需要类型安全、组件库或 3 个以上变体时用 CVA（约 1KB）；需要响应式变体、多部分/插槽组件（卡片、手风琴）或通过 extend 组合时用 tailwind-variants（约 4KB）。不建议使用 @apply，必要时用 @utility 定义自定义工具类。状态管理可用原生 data 属性（如 data-loading、data-disabled）及 @custom-variant 定义自定义变体，React 可参考 shadcn/ui 模式。交互元素需补充 type、disabled、aria-disabled、aria-busy、aria-label 等无障碍属性。
v3 主要破坏性变更：shadow-sm 改为 shadow-xs，rounded-sm 改为 rounded-xs，bg-opacity-50 改为 bg-black/50，bg-gradient-to-r 改为 bg-linear-to-r，border 与 ring 默认色改为 currentColor（ring 改 ring-3）。可用 npx @tailwindcss/upgrade 自动迁移。
适用场景：使用 Tailwind v4 的 React（Next.js 15 + shadcn/ui + CVA）或 Vue 3 项目组件开发。限制：文中未提供具体版本兼容范围与计费信息，暂未提供。