自定义Tailwind字体大小类为何被文本颜色类覆盖？

核心原因 #

twMerge 会依据CSS属性对类进行分组，当它判定两个类属于同一属性冲突组时，会自动保留最后传入的类。你的问题根源在于：twMerge 默认规则误将自定义的 text-xxs（控制字体大小）和 text-black（控制文字颜色）归为同一冲突组（二者都以 text- 开头），但实际上这两个类对应完全不同的CSS属性（font-size 和 color），本不应被合并。

解决步骤 #

方法1：自定义twMerge冲突组规则（推荐） #

通过扩展 twMerge 的配置，明确告知它两个类分属不同属性组，避免误判冲突：

import { twMerge, extendTailwindMerge } from 'tailwind-merge';
import clsx, { ClassValue } from 'clsx';

// 自定义tailwindMerge规则，区分字体大小和颜色类
const customTwMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      // 将text-xxs归入字体大小组
      'font-size': ['text-xxs'],
      // text-black默认属于颜色组，无需额外配置
    },
  },
});

export function cn(...inputs: ClassValue[]) {
  return customTwMerge(clsx(inputs));
}

方法2：调整自定义类命名（快速临时方案） #

如果不想修改配置，可以给字体大小类换个前缀，避免和颜色类的 text- 重叠：

/* 自定义CSS */
.text-size-xxs {
  font-size: 10px;
}

调用时改用新类名：

className={cn("text-size-xxs text-black")}

验证 #

修改完成后，无论传入顺序是 text-xxs text-black 还是 text-black text-xxs，两个类都会被正确保留，不会被合并。

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