twMerge需参数分离传入才能生效，字符串拼接会失效；必须搭配clsx封装为cn函数，并统一前缀、关闭preflight，否则类名冲突无法解决。
直接用 twMerge 就能解决类名冲突，但前提是传参方式正确、类名格式统一、不混用前缀与无前缀类——错一步，twMerge 就等于没开。
为什么 twMerge 传字符串拼接就失效
常见错误是把动态类名拼进一个字符串再丢给 twMerge：
-
twMerge(`p-4 ${isBig ? 'p-6' : ''}`)→twMerge根本不解析字符串插值，${isBig ? 'p-6' : ''}对它来说就是个黑盒，无法识别冲突 - 空格、
undefined、多余换行会污染结果，比如生成"p-4 "这种无效类名 - 它只按传入的参数项做语义合并，不是按 CSS 文件里最终输出顺序去“猜”谁该赢
必须用参数分离方式传入
把基础类、条件类、用户类拆成独立参数，让 twMerge 逐个识别优先级：
twMerge( 'inline-flex items-center', size === 'sm' && 'text-sm px-2 py-1', isDisabled && 'opacity-50 cursor-not-allowed', className // 用户传入的额外类，如 'md:px-4' )
- 布尔表达式为
false或null会被自动跳过，不用手动过滤 - 响应式类（
md:px-4）、变体类（hover:bg-blue-600）能被正确识别，且不与普通px-4冲突 - 如果
className里含p-2和p-6，twMerge会保留后者；但如果混了p-2和tw-p-6（前缀不一致），它直接放弃处理
搭配 clsx 封装成 cn 函数才真正可靠
单独用 twMerge 能解覆盖，但不防空值；单独用 clsx 能防空值，但不解覆盖。二者必须组合：
立即学习“前端免费学习笔记（深入）”；
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs) {
return twMerge(clsx(inputs));
}
- 所有输入都走
clsx过滤：cn('p-4', null, { 'text-red-500': false })→"p-4" - 再交由
twMerge合并冲突：cn('p-4', 'p-6')→"p-6" - 注意：如果项目开了
prefix: 'tw-'，所有传入cn()的类名必须带前缀，否则twMerge不识别也不报错
容易被忽略的三处断链点
哪怕封装了 cn，只要漏掉以下任一环节，整个链路就失效：
- 没关
corePlugins.preflight: false→ 原生button仍是透明背景，UI 库按钮直接不可见 - 开了
prefix: 'tw-'却没全局替换模板里的类名 →class="p-4"在编译后找不到对应 CSS 规则 - 用户传的
className里混了无前缀类（如p-6）和带前缀类（如tw-rounded）→twMerge对前者完全静默
