如何扩展TailwindMerge使其支持自定义文本颜色类？

我在Tailwind配置中扩展了自定义灰度色阶：

const config = {
  theme: {
    extend: {
      colors: {
        gray: {
          450: '#8e95a2'
        },
      }
     }
   }
}

使用twmerge工具合并text-gray-450类时，这个新类会在最终类列表中消失。我尝试了以下方法但未解决问题：

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'text-color': [{ text: [{ gray: ['450'] }] }]
    }
  }
})

请问如何正确扩展TailwindMerge来修复此问题？

你之前的配置错误在于classGroups里的text-color结构多了一层不必要的数组嵌套，导致twmerge无法正确识别自定义色阶。以下两种配置方式都能解决问题：

方式一：直接添加完整的颜色类后缀 #

这种方式直接把gray-450作为文本颜色类的有效值添加进去：

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'text-color': [{ text: ['gray-450'] }]
    }
  }
})

方式二：针对gray色阶扩展 #

如果需要给gray色阶添加多个自定义值，这种结构化的写法更清晰：

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'text-color': [{ text: { gray: ['450'] } }]
    }
  }
})

配置完成后，twmerge就能正确识别并保留text-gray-450类，不会在合并操作中将其移除。

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