Tailwind CSS样式未覆盖问题求助：文本颜色未按预期显示

问题重现 #

你写了两个div，期望第一个div因text-red-800在后面显示红色，第二个div因text-blue-600在后面显示蓝色，但实际两者都是红色：

function App() {
    const color = "text-blue-600";
    return (
        <div>
            <div className={`${color} text-red-800`}>
                hello
            </div>
            <div className={`text-red-800 ${color}`}>
                world
            </div>
        </div>
    );
}

核心原因 #

这和Tailwind生成CSS的规则以及CSS优先级逻辑直接相关：

• Tailwind的所有文本颜色工具类（比如text-red-800、text-blue-600）都是单一类选择器，优先级完全相同
• CSS中，优先级相同的样式规则，谁在最终生成的CSS文件里定义得更靠后，谁就会覆盖前面的样式
• 你的场景里，Tailwind生成的CSS代码中，text-red-800的规则排在text-blue-600之后，所以不管你在HTML的className里调整类的顺序，最终都是红色样式生效

为什么tailwind-merge能解决问题 #

tailwind-merge是在JS层面处理className字符串：它会识别出哪些类是作用于同一个CSS属性的（比如两个都是文本颜色类），然后自动移除重复冲突的类，只保留你在className中最后出现的那个。比如第二个div的className经过处理后，会只保留text-blue-600，自然就不会有样式冲突了。

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