用途:当 shadcn 组件上的 className 覆盖出现在 DOM 中却不产生视觉效果,或两个 Tailwind 工具类同时渲染但只有一个生效时,用于快速定位样式与类合并冲突。
主要能力:整理三类常见根因(跳过 cn() 导致重复工具类泄漏、cva 合并顺序理解错误使 className 落在 variant 之前、同一文件混用 Tailwind v3 与 v4 类语义),并给出 tailwind-merge 的确定性合并规则(如 p-4 p-2 取 p-2、任意属性与预设工具类不互相抵消、! 重要修饰符单独命名空间跟踪)以及 cva 的规范顺序:base → variants → compoundVariants → defaultVariants → consumer className,最终统一经 cn() 调用 twMerge 一次,故消费者 className 通常胜出。
使用方式:先用决策树排查——打开渲染后的 DOM,若两个类都在,说明绕过了 cn();若只错的一个在,检查 cn() 参数顺序;再看是否使用重要修饰符、任意属性写法或已升级到 v4。修复示例包括将 "p-4 " + (compact && "p-2") 改为 cn("p-4", compact && "p-2"),将 className={cn(className, buttonVariants({ variant, size }))} 改为 className={cn(buttonVariants({ variant, size }), className)},任意属性改为任意值形式 cn("p-[1rem]", "p-4")。
适用场景:shadcn 项目中的类合并与样式覆盖调试,尤其是升级 Tailwind v4 后出现样式翻转、cva 变体只偶尔生效(variant 传入空字符串而非 undefined)等情形。
限制:依赖 tailwind-merge、cva、Tailwind 的既定行为,资料未提供收费、价格与平台信息;具体版本行为需以实际项目与官方文档为准。