tailwind-merge自定义fontSize时忽略文字颜色的配置疑问

问题根源 #

tailwind-merge默认把所有text-前缀的类归为同一组（textColor组），合并时会自动覆盖同组的前序类。但你的text-2是自定义的fontSize类，text-primary是文字颜色类，两者本不该互相覆盖，所以需要修改tailwind-merge的分组规则。

解决步骤 #

1. 创建自定义tailwind-merge配置文件 #

在Vite项目的src目录下新建一个工具文件，比如src/utils/tw-merge.js（TypeScript项目用.ts）。

2. 扩展tailwind-merge的分组规则 #

用extendTailwindMerge方法重写类分组，把自定义的fontSize类和颜色类分开：

import { extendTailwindMerge, getDefaultConfig } from 'tailwind-merge'

const defaultConfig = getDefaultConfig()

// 自定义合并规则
export const twMerge = extendTailwindMerge({
  classGroups: {
    // 重写textColor分组：排除数字结尾的text-*类
    textColor: [
      ...defaultConfig.classGroups.textColor.filter(item => 
        typeof item === 'string' && !/^text-\d+(?:\.\d+)?$/.test(item)
      ),
      /^text-(?!\d+(?:\.\d+)?$).+/ // 正则匹配非数字结尾的颜色类
    ],
    // 把自定义数字格式的text-*加入fontSize分组
    fontSize: [
      ...defaultConfig.classGroups.fontSize,
      /^text-\d+(?:\.\d+)?$/ // 匹配text-0、text-0.25、text-2这类自定义字号类
    ]
  }
})

3. 在项目中使用自定义的twMerge #

替换原本直接导入的twMerge，改用自己定义的版本：

import { twMerge } from './utils/tw-merge'

// 测试合并
const result = twMerge('text-primary', 'text-2')
// 输出：'text-primary text-2'，两个类都保留

4. 配置文件位置说明 #

Vite项目里这个文件可以放在src/utils、src/lib等任意工具类目录，只要导入路径正确就行。

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