tailwind-4

用途

本技能提供 Tailwind CSS 4 的样式编写模式与最佳实践，用于在使用 Tailwind（className、variants、cn()）进行样式开发时提供规范指导，尤其适用于动态样式或 CSS 变量的场景。

主要能力

样式决策树

技能以决策树形式帮助判断样式实现方式：

Tailwind 类存在？→ 使用 className="..."
动态值？→ 使用 style={{ width: ${x}% }}
条件样式？→ 使用 cn("base", condition && "variant")
仅静态？→ 使用 className="..."（无需 cn()）
库无法使用 class？→ 使用带 var() 常量的 style 属性

关键规则

禁止在 className 中使用 var()：不应写成 className="bg-[var(--color-primary)]" 或 className="text-[var(--text-color)]"，而应始终使用 Tailwind 语义类。

禁止使用十六进制颜色：不应写成 className="text-[#ffffff]" 或 className="bg-[#1e293b]"，而应使用 Tailwind 颜色类，如 text-white、bg-slate-800。

cn() 工具函数

cn() 由 clsx 与 tailwind-merge 组合实现：

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

何时使用 cn()：条件类名、与可能冲突的类名合并（如 className 可能覆盖）、多个条件组合。

何时不使用 cn()：静态类名无需额外包装，直接使用 className 即可。

图表/库的样式常量

当库不接受 className（如 Recharts）时，可使用带 var() 的常量，仅用于库属性：

const CHART_COLORS = {
  primary: "var(--color-primary)",
  secondary: "var(--color-secondary)",
  text: "var(--color-text)",
  gridLine: "var(--color-border)",
};

使用示例：<XAxis tick={{ fill: CHART_COLORS.text }} />、<CartesianGrid stroke={CHART_COLORS.gridLine} />。

动态值

真正动态的值使用 style 属性，例如 style={{ width: ${percentage}% }}、style={{ opacity: isVisible ? 1 : 0 }}；主题化可使用 CSS 自定义属性，如 style={{ "--progress": ${value}% } as React.CSSProperties}。

常见模式

Flexbox：flex items-center justify-between gap-4、flex flex-col gap-2、inline-flex items-center
Grid：grid grid-cols-3 gap-4、grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6
间距：p-4、px-4 py-2、pt-4 pb-2、m-4、mx-auto、mt-8 mb-4
排版：text-2xl font-bold text-white、text-sm text-slate-400、text-xs font-medium uppercase tracking-wide
边框与阴影：rounded-lg border border-slate-700、rounded-full shadow-lg、ring-2 ring-blue-500 ring-offset-2
状态：hover:bg-blue-600 focus:ring-2 active:scale-95、focus:border-blue-500 focus:outline-none、group-hover:opacity-100
响应式：w-full md:w-1/2 lg:w-1/3、hidden md:block、text-sm md:text-base lg:text-lg
暗色模式：bg-white dark:bg-slate-900、text-gray-900 dark:text-white
任意值（逃生舱）：w-[327px]、top-[117px]、grid-cols-[1fr_2fr_1fr] 可用于设计系统之外的一次性值，但颜色不应使用任意值，应改用主题。

使用方式

该技能以规则与代码示例形式提供，开发者可在编写 Tailwind 样式时参照决策树与关键规则进行实现。

适用场景

适用于使用 Tailwind CSS 4 进行样式开发的前端项目，尤其是涉及动态样式、CSS 变量、条件类名合并，以及图表库等无法直接使用 className 的场景。

限制

资料未提供该技能的安装方式、依赖版本要求、平台支持范围及收费信息。