使用tailwind-merge+clsx自定义cn函数时Tailwind默认样式失效

问题根源 #

大概率是 tailwind-merge 对 Tailwind V4 自定义颜色工具类的合并逻辑兼容问题，结合你提到的加 ! 前缀就生效的情况，具体原因如下：

• 合并规则误判：tailwind-merge 可能错误地将自定义颜色类（如 text-my-white）与父组件传入 classes 中的排版类（比如你在 @theme 里定义的 text-body、font-bold 等）判定为同一组冲突类，从而移除先传入的默认颜色类。
• 权重优先级问题：Tailwind 工具类默认权重相同，当 tailwind-merge 判定“冲突”时，会保留后传入的类（即 classes 内容）；加 ! 前缀后类权重升级为 !important，就能强制生效。

解决办法 #

1. 升级 tailwind-merge 版本

目前 tailwind-merge 针对 Tailwind V4 的适配仍在迭代，更新到最新版本通常能修复这类自定义类的合并误判：

npm update tailwind-merge

2. 强制保留默认样式（临时快速方案）

直接给默认颜色类添加 ! 前缀提升权重：

<span
  class={cn(
    '!text-my-white',
    { 'bg-my-bg-green': theme === "green" },
    { 'bg-my-bg-red': isRed },
    classes
  )}
>
  {title}
</span>

3. 调整参数顺序（按需选择）

若希望默认样式优先于父组件传入的类，可将 classes 放在参数最前面：

<span
  class={cn(
    classes,
    'text-my-white',
    { 'bg-my-bg-green': theme === "green" },
    { 'bg-my-bg-red': isRed }
  )}
>
  {title}
</span>

注意：此方案会让默认样式覆盖父组件传入的同类型类，需根据业务场景判断是否适用。

4. 自定义高权重组件类

在 main.css 中通过 @layer components 定义高权重类，避免手动加前缀：

@layer components {
  .text-my-white {
    color: var(--color-my-white) !important;
  }
}

内容的提问来源于stack exchange，提问作者meez