tailwind-4

用途：为使用 Tailwind CSS 4 编写样式时提供统一模式，触发场景包括使用 className、条件样式与暗色模式。

主要能力与模式：

1. 语义化类名：使用 bg-primary、text-foreground、border-border 等语义类，避免在 className 中写 var()，以免破坏 Tailwind 优化器。
2. 优先字面量而非十六进制：如 text-white、bg-slate-900、text-gray-500，存在等价类时避免 text-[#ffffff] 这类写法。
3. 条件样式用 cn()：由 clsx 与 tailwind-merge 组合，export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }，用于条件与冲突合并，并接受外部 className 覆盖；纯静态类无需 cn()。
4. 变体用 cva（class-variance-authority）定义 variant 与 size，再经 cn(buttonVariants({ variant, size }), className) 应用。
5. 暗色模式：使用 dark:bg-gray-900 等类，配置 darkMode: 'class' 或 'media'。
6. 响应式：移动优先，使用 sm: md: lg: xl: 断点。
7. 库例外：对不支持 className 的库（如 Recharts）使用 CSS 变量常量，如 stroke={CHART_COLORS.primary}。
8. 运行时动态值：用 style 属性计算，如 style={{ width: ${percentage}% }}，或用 CSS 自定义属性配合 grid-cols-[repeat(var(--card-cols),1fr)]。

规则与限制：Tailwind 4 采用 CSS 优先配置（CSS 中的 @theme），新项目不要用 tailwind.config.js 扩展主题；避免在组件 CSS 中用 @apply；组件库类（shadcn/ui、Radix）不要在同一元素上用 Tailwind 类覆盖，应通过变体或包装元素扩展；动态类名必须是完整字符串（如 'text-red-500'），不可用字符串插值拼接，否则 PurgeCSS/Tailwind 无法识别。反模式包括 className 中使用 var()、用字符串拼接做条件、对纯静态类使用 cn()。

适用场景：React 组件样式、设计系统变体、暗色模式与响应式布局。具体安装与版本要求资料未提供。