直接拼字符串或嵌套三元运算写 className 在多状态、多尺寸、响应式场景下易出错，如漏空格、混入 "false"、类名冲突、JIT 不识别动态类；clsx 自动过滤无效值，tailwind-merge 解决类名覆盖冲突，二者配合 JIT 配置与状态管理缺一不可。
直接拼字符串或嵌套三元运算写 className 在简单场景下能跑通，但一到多状态、多尺寸、响应式叠加时就容易漏空格、混入 "false"、类名冲突失效，甚至 JIT 编译不识别动态拼接——这不是写法“不够优雅”的问题，是根本不可维护。
为什么 className={isActive && 'bg-blue-500'} 会渲染出 false
React JSX 中，false、null、undefined 会被自动忽略，但 isActive && 'bg-blue-500' 在 isActive 为 false 时返回的是布尔值 false，它不是“被忽略”的空值，而是被转成字符串 "false" 写进 DOM 的 class 属性里。结果就是：<div class="false">，既没样式，还可能干扰 CSS 选择器。
常见连带错误包括：
-
className={[base, isDisabled && 'opacity-50'].join(' ')}——false变成字符串参与拼接 -
className={`p-2 ${isActive ? 'bg-blue-600' : ''} ${isDisabled ? 'cursor-not-allowed' : ''}`}—— 空字符串占位、空格冗余、分支一多就难读 -
className={`bg-${color}-500`}—— Tailwind JIT 默认只扫描静态类名，bg-red-500和bg-blue-500若未在源码中显式出现，压根不会被生成
用 clsx 过滤无效值比手写 .filter(Boolean).join(' ') 更可靠
clsx 是专为 className 场景设计的轻量工具（仅 0.3KB），它自动跳过 false、null、undefined、空字符串，且支持数组、对象、嵌套结构，无需手动处理。
立即学习“前端免费学习笔记（深入）”；
安装后直接使用：
npm install clsx
基础写法示例：
import clsx from 'clsx';
function Button({ isActive, isDisabled, size }) {
return (
<button
className={clsx(
'px-4 py-2 rounded font-medium',
{ 'bg-blue-600 text-white': isActive, 'bg-gray-200': !isActive },
{ 'text-sm': size === 'sm', 'text-base': size === 'md' },
isDisabled && 'opacity-50 cursor-not-allowed'
)}
disabled={isDisabled}
>
Click me
</button>
);
}
注意：别在 clsx 里调用函数（如 {computeClass()}），否则每次渲染都执行，可能触发副作用或重复计算。
当类名存在互斥或覆盖关系时，必须加 tailwind-merge
clsx 只负责拼接和过滤，不管语义。比如同时传入 'px-4' 和 'px-6'，它会原样输出 "px-4 px-6"，最终生效的是后者；又比如 'hidden' 和 'flex' 共存，CSS 会按顺序应用，但你未必记得哪个该优先。
tailwind-merge 能识别 Tailwind 类名的逻辑关系，自动剔除冲突项（只保留最后一个有效项），并正确处理响应式前缀（如 sm:hidden 和 md:flex）。
安装与基本用法：
npm install tailwind-merge
import { twMerge } from 'tailwind-merge';
// ✅ 正确拆分传参，让 twMerge 分析每个片段
className={twMerge(
'py-2 px-4 rounded',
isActive && 'bg-blue-600',
!isActive && 'bg-gray-200',
isDisabled && 'opacity-50 cursor-not-allowed',
className // 外部传入的类名，建议放最后
)}
关键点：不要把外部 className 拼进字符串再传给 twMerge，否则它无法解析内容；也不要把它当成 Tailwind 类处理——自定义类（如 app-button-primary）需提前用 extendTailwindMerge 注册，否则可能被误删。
真正复杂的地方不在“怎么写”，而在“谁该管什么”：状态控制显隐、clsx 控制条件合并、tailwind-merge 控制覆盖优先级、JIT 配置控制类名生成范围——四者缺一不可，且顺序不能颠倒。漏掉任意一环，上线后都可能突然样式错乱，而错误还不报红。
