tailwindcss 和clsx，twmerge库的使用
clsx
- 作用：一个轻量级工具库，用于条件性地组合 CSS 类名
- 支持字符串、数组、对象等多种输入方式
clsx("foo", "bar"); // => 'foo bar'
clsx("foo", true && "bar", false && "baz"); // => 'foo bar'
clsx({ active: true, disabled: false }); // => 'active'
clsx(["a", "b"], "c"); // => 'a b c'
twMerge（来自 tailwind-merge）
- 作用：专门为 Tailwind CSS 设计，智能合并类名并解决冲突
- 当存在相同类型的 Tailwind 类时，后者会覆盖前者
twMerge("px-2 py-1", "px-4"); // => 'py-1 px-4' （px-2 被 px-4 覆盖）
twMerge("text-red-500", "text-blue-500"); // => 'text-blue-500'（颜色冲突解决）
// 不用 twMerge 的问题：
("px-2 py-1 px-4"); // px-2 和 px-4 都存在，行为不可预期
两者组合：cn 函数
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
| 步骤 | 工具 | 职责 |
|---|---|---|
| 第一步 | clsx |
处理条件逻辑，将各种格式统一为字符串 |
| 第二步 | twMerge |
合并 Tailwind 类名，解决样式冲突 |
实际使用示例：
cn("px-2", isActive && "bg-blue-500", { "text-white": true }, "px-4");
// clsx 先处理 => 'px-2 bg-blue-500 text-white px-4'
// twMerge 再处理 => 'bg-blue-500 text-white px-4'（px-2 被 px-4 覆盖）
这个 cn 函数在 React + Tailwind 项目中非常常见，几乎是标配工具函数。