用途：指导在 Tailwind CSS v4 中构建按钮与组件，决定何时直接用工具类、何时用 CVA（class-variance-authority）或 tailwind-variants 抽象，并处理变体、状态与无障碍。
核心原则：优先在标记中直接使用工具类；仅当有 3 个以上变体时才做抽象。避免使用 @apply（除极少数情况），需要自定义工具类时用 @utility。
v4 配置：CSS-first，取消 tailwind.config.js。用 @import "tailwindcss"; 替代三条 @tailwind 指令，在 @theme 中定义 --color-*、--font-sans、--radius-button 等设计令牌，会同时生成工具类与 CSS 变量；自动模板发现遵循 .gitignore。文中称 Oxide 引擎全量构建快 3.5 倍、增量快 8 倍。
选择方式：1-2 个变体或原型用纯工具类（0KB、无类型安全）；3+ 变体、需要类型安全或组件库用 CVA（约 1KB）；需要响应式变体、多部件/slot 组件（卡片、折叠面板）或通过 extend 组合时用 tailwind-variants（约 4KB）。
状态与无障碍：用 data 属性管理状态，如 data-loading、data-disabled 配合 data-loading: 前缀；可用 @custom-variant 定义如 selected-not-disabled 的自定义变体。交互元素需带 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 默认色由 gray-200 改为 currentColor、ring 变为 ring-3。可运行 npx @tailwindcss/upgrade 自动迁移。
推荐栈（2025）：React 用 Next.js 15 + shadcn/ui + CVA + Tailwind v4；Vue 用 Vue 3 + shadcn/vue + Tailwind v4。依赖体积参考约为 CVA 1KB、clsx 0.2KB、tailwind-merge 7KB。
限制：实际版本兼容性、具体项目成本与性能表现，资料未提供更多验证信息。