【CSS】clsx + tailwind-merge 轻松解决动态类名与样式冲突！

1.背景、使用场景

• clsx
  • 一个用于动态拼接 CSS 类名的工具库；
• tailwind-merge
  • 告别类名冲突， tailwind-merge 提供的工具函数，用于合并 Tailwind CSS 类名并解决冲突。
• cn 函数
  • 工具函数 cn，用于在 React 或前端项目中 动态合并 CSS 类名，特别是结合了 clsx 和 tailwind-merge 的功能。
  • 它非常适合在使用 Tailwind CSS 时处理复杂的类名逻辑。

2.版本

"clsx": "^2.1.1",
"tailwind-merge": "^3.0.2"

3.安装使用

npm install  clsx tailwind-merge

4.clsx

一个用于动态拼接 CSS 类名的工具库。

它接受任意数量的参数（字符串、对象、数组等），并返回一个拼接后的类名字符串。

例子：

import { clsx } from "clsx";
clsx("text-red-500", { "bg-blue-500": true }, ["p-4", "m-2"]);
// 输出: text-red-500 bg-blue-500 p-4 m-2

clsx("text-red-500", { "bg-blue-500": false }, ["p-4", "m-2"]);
// 输入: text-red-500 p-4 m-2

5.twMerge

tailwind-merge 提供的工具函数，用于合并 Tailwind CSS 类名并解决冲突。

它会根据 Tailwind 的优先级规则，自动处理重复或冲突的类名。

例如：

import { twMerge } from "tailwind-merge";

twMerge("p-4 p-6"); // 输出: "p-6"

6.cn 函数

• 结合了 clsx 和 twMerge 的功能，我们可以实现一个 cn 实用的工具函数 。
• 用于在 React 或前端项目中 动态合并 CSS 类名。
• 它非常适合在使用 Tailwind CSS 时处理复杂的类名逻辑。
• 可以接受任意数量的类名参数（...inputs），通过 clsx 拼接，再通过 twMerge 合并和优化。

cn 函数示例

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

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

7.使用场景

cn 函数非常适合在以下场景中使用：

1. 动态类名：
   • 根据组件的 props 或状态动态生成类名。
   • 例如，按钮组件的不同变体（primary、secondary 等）。
2. 条件类名：
   • 根据条件添加或移除类名。
   • 例如，根据 disabled 状态添加 opacity-50。
3. Tailwind CSS 类名冲突：
   • 解决 Tailwind CSS 类名冲突问题。
   • 例如，p-4 和 p-6 同时存在时，twMerge 会自动选择优先级更高的类名。

8.示例

8.1. 基本用法

cn 动态拼接类名：

• 默认类名："px-4 py-2 rounded-md font-medium"。
• 如果 primary 为 true，添加 "bg-blue-500 text-white"。
• 如果 disabled 为 true，添加 "opacity-50 cursor-not-allowed"。

import { cn } from "./utils";

function Button({ primary, disabled }) {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded-md font-medium",
        primary ? "bg-blue-500 text-white" : "bg-gray-500 text-black",
        disabled && "opacity-50 cursor-not-allowed"
      )}
    >
      Click Me
    </button>
  );
}

8.2 解决 Tailwind 类名冲突

cn 会自动处理 p-4 和 p-8 的冲突：

• 如果 padding === "large"，最终类名是 "p-8 bg-white rounded-lg shadow-md"。
• 否则，最终类名是 "p-4 bg-white rounded-lg shadow-md"。

import { cn } from "./utils";

function Card({ padding }) {
  return (
    <div
      className={cn(
        "p-4 bg-white rounded-lg shadow-md",
        padding === "large" && "p-8"
      )}
    >
      Card Content
    </div>
  );
}

9.总结

• cn 是一个结合了 clsx 和 twMerge 的工具函数，用于动态拼接和优化 CSS 类名。
• 特别适合在 React 组件中处理复杂的类名逻辑，尤其是使用 Tailwind CSS 时。
• 它让代码更简洁、更易维护，同时解决了 Tailwind 类名冲突的问题。

如果你有更多问题，欢迎随时问我！😊