Tailwind Merge无法同时应用自定义颜色与排版类的问题

问题场景 #

自定义了颜色类text-green（属于Tailwind colors体系）和排版类text-card-highlight（通过Tailwind插件添加的utilities工具类），两类没有CSS属性冲突，但用tailwind-merge合并时，只有一个类能生效；不使用tailwind-merge时，两个类正常工作。

自定义排版类的Tailwind配置代码：

plugin(({ addUtilities, theme }) => {
    addUtilities(
        {
            '.text-card-subheading': {
                fontSize: theme('fontSize.xxs'),
                fontWeight: theme('fontWeight.normal'),
            },
            '@screen md': {
                '.text-card-subheading': {
                    fontSize: theme('fontSize.xs'),
                },
            },
        },
    )
})

问题原因 #

tailwind-merge默认会把所有text-开头的类归为同一分组，哪怕一个是颜色类、一个是排版类，也会被误判为属性冲突而做覆盖处理，实际两类并没有重叠的CSS属性。

解决方案 #

方案1：修改自定义类命名 #

给排版类换个前缀，避免和颜色类的text-重名，比如改成typ-card-highlight，这样tailwind-merge不会把它和颜色类归为一组，合并时就不会被覆盖。

方案2：自定义tailwind-merge分组规则 #

通过extendTailwindMerge扩展默认规则，把自定义排版类单独划分到新分组，解除和颜色类的冲突关联：

import { extendTailwindMerge } from 'tailwind-merge'

const customTwMerge = extendTailwindMerge({
    classGroups: {
        'text-color': ['text-*'], // 原生颜色类保留原分组
        'text-typography': ['text-card-highlight', 'text-card-subheading'] // 自定义排版类单独分组
    },
    conflictingClassGroups: {
        // 移除text-color和text-typography的冲突关联，默认二者被判定为冲突
    }
})

之后用这个customTwMerge代替原生的twMerge方法即可。

方案3：给工具类加全局前缀 #

在Tailwind配置里给所有自定义工具类加统一前缀，比如：

/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: 'tw-',
    // 其他配置...
    plugins: [
        // 你的自定义插件代码
    ]
}

这样自定义排版类会变成tw-text-card-highlight，和text-green前缀不同，tailwind-merge就不会误判冲突了。

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