Tailwind Merge是否支持带前缀的Tailwind CSS类？

问题重现 #

使用带tw-前缀的Tailwind类时，Tailwind Merge无法正确合并冲突类：

console.log(twMerge("tw-bg-primary", "tw-bg-accent")); // 输出"tw-bg-primary tw-bg-accent"，预期应为"tw-bg-accent"
console.log(twMerge("bg-primary", "bg-accent")); // 输出"bg-accent"（正常）

解决方案 #

Tailwind Merge支持通过自定义配置指定类前缀，只需初始化时传入prefix选项即可：

代码实现 #

import { createTailwindMerge } from 'tailwind-merge';

// 创建带前缀配置的合并函数
const twMerge = createTailwindMerge({
    prefix: 'tw-'
});

// 测试验证
console.log(twMerge("tw-bg-primary", "tw-bg-accent")); // 输出"tw-bg-accent"，符合预期

原理说明 #

Tailwind Merge默认仅识别无前缀的Tailwind类，通过指定prefix参数，工具会自动识别带该前缀的类，并遵循Tailwind优先级规则合并冲突类（如同一类别的背景色类会保留最后一个）。

内容的提问来源于stack exchange，提问作者Mohamad Nour Kodra