twmerge不能单独用于classname，因为它只解决类名冲突而不过滤false/null等假值；必须先用clsx规整条件类名，再传入twmerge进行智能覆盖。
直接用 twMerge 包一层就能解决大多数 Tailwind 类名冲突，但必须配合 clsx 或手动拼接后再传入——它自己不处理 false/null 等假值。
为什么 twMerge 不能单独用在 className 上
twMerge 只做一件事：识别语义冲突并保留最后出现的有效类。它不解析 JSX 表达式，也不过滤无效值。
- 传入
twMerge('p-4', isDisabled && 'p-6')，当isDisabled为false时，第二项是布尔值false，twMerge会把它转成字符串"false"并保留 → 最终 class 是"p-4 false" - 它不理解
{ 'p-6': isDisabled }这种对象写法，只接受扁平的字符串或字符串数组 - 所以你得先用
clsx把条件、对象、嵌套数组规整成干净字符串，再喂给twMerge
twMerge 怎么判断哪些类会互相覆盖
它内置了 Tailwind 的原子类分组规则，比如：
-
p-4、px-6、py-2都属于「padding」组，同组只留最后一个 -
text-red-500和text-blue-700属于「color text」组，后写的生效 -
md:p-4和p-6不冲突（不同变体），两者都保留 -
hover:text-red-500和group-hover:text-blue-500也不冲突（不同伪类前缀）
这意味着你不用记“哪个优先级高”，只要按逻辑顺序写，twMerge 就能推出来。
常见冲突场景和正确写法对比
下面这些写法看似差不多，结果却差很远：
- ❌ 错误：直接拼字符串 →
className={`p-4 ${isLarge ? 'p-8' : ''} text-red-500 ${isUrgent ? 'text-yellow-500' : ''}`}会残留空格、空字符串，且p-4和p-8同时存在，靠 CSS 顺序覆盖，不可控 - ✅ 正确：用
cn封装 →className={cn('p-4', isLarge && 'p-8', 'text-red-500', isUrgent && 'text-yellow-500')}clsx过滤掉false，twMerge自动丢掉p-4，只留p-8；颜色类也按书写顺序保留后者 - ⚠️ 注意：外部传入的
className必须参与cn合并 →className={cn('base', props.className)}，否则冲突无法消解
动态类名如 text-${color}-500 为什么 twMerge 拦不住
twMerge 完全不检查类名是否合法，它只管“已有类之间的覆盖关系”。真正拦不住的是 Tailwind 编译器本身：
-
text-${color}-500是运行时拼的，JIT 模式下不会扫描这种模板字符串 → 对应 CSS 根本没生成 - 即使你硬塞进去，
twMerge也会原样保留，因为它不认识这个类属于哪一组 - 想支持动态色值，得在
tailwind.config.js的theme.extend.colors里显式定义所有可能的color，再用cn('text-red-500', `text-${color}-500`)—— 但注意，这仍依赖color是静态可枚举的值
真正容易被忽略的点是：冲突解决只是表象，底层类名是否被编译出来，才是样式能否生效的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
