Tailwind Merge与自定义text-shadow工具类样式冲突问题求助

冲突原因 #

Tailwind Merge 默认将所有以 text- 开头的类归为同一冲突组，导致原生的 text-{color}（文本颜色）和自定义的 text-shadow-{color}（阴影颜色）被判定为互斥类，同时 text-shadow-{size} 也会因分组规则错误处理，最终出现部分样式丢失的情况。

解决方案 #

通过 extendTailwindMerge 自定义类分组规则，将 text-shadow-* 类从默认的 text 组中分离，单独划分为独立组，避免与原生文本颜色类冲突。

1. 自定义Tailwind Merge配置 #

创建单独的配置文件（如 tw-merge.ts），编写如下配置：

import { extendTailwindMerge } from 'tailwind-merge';

export const twMerge = extendTailwindMerge({
  classGroups: {
    // 保留原生text-{color}类的冲突组
    text: [{ text: ['*'] }],
    // 新增text-shadow组，包含所有text-shadow-*变体
    'text-shadow': [{ 'text-shadow': ['*'] }],
  },
  // 声明text-shadow-为自定义前缀，确保Merge正确识别
  prefixes: ['text-shadow-'],
});

2. 使用自定义的twMerge函数 #

替换原有的 tailwind-merge 导入，使用自定义配置后的函数合并类名：

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

// 合并目标类名
const mergedClasses = twMerge('text-blue-500 text-shadow-lg text-shadow-red-500');
// 预期输出：'text-blue-500 text-shadow-lg text-shadow-red-500'

可选：精确指定变体值 #

如果你的 text-shadow 自定义类仅支持特定尺寸和颜色值，可以更精确地定义组内有效值，避免匹配无关类：

export const twMerge = extendTailwindMerge({
  classGroups: {
    text: [{ text: ['*'] }],
    'text-shadow': [{ 
      'text-shadow': ['sm', 'lg', 'red-500', 'blue-500', 'green-600'] 
    }],
  },
  prefixes: ['text-shadow-'],
});

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