Tailwind CSS中后添加的类未覆盖前置属性的原因咨询

嗨，这个问题我刚上手Tailwind的时候也踩过一模一样的坑，立马给你捋清楚来龙去脉！

你可能误以为HTML里类的书写顺序会决定样式的优先级，但实际上这是个误区——当两个CSS选择器的权重完全相同时，真正起作用的是样式表中规则的定义顺序：样式表中后出现的规则，会覆盖先出现的规则，和HTML里类的顺序根本没关系！

咱们结合你的例子拆解一下：

1. Tailwind里所有的bg-*工具类，都是单一的类选择器，权重完全相同（都是0,0,1,0），所以谁能生效全看它们在最终CSS文件里的先后位置。
2. 在默认的Tailwind颜色 palette 里，sky系列的背景类在生成的CSS文件中，是比orange系列的背景类更靠后定义的。

那你的两个例子就说得通了：

• 第一个例子里，你在HTML里先写bg-orange-500再写bg-sky-500，刚好和CSS里的规则顺序一致，所以sky的样式生效，你误以为是HTML顺序的功劳；
• 第二个例子里，你把bg-orange-500写在HTML后面，但CSS里它的规则还是在bg-sky-500前面，所以sky的样式依然会覆盖orange，这就是你觉得“不生效”的核心原因！

如果想让orange的样式强制覆盖sky，有两个简单的解决办法：

• 用Tailwind的!重要性变体，直接把类写成bg-orange-500!（感叹号和类名紧挨着，别加空格），这样这个类的权重会被提升，就能覆盖其他bg类了；
• 如果你不想用!，也可以在tailwind.config.js里自定义颜色顺序，把orange放在sky后面，这样生成的CSS里orange的bg类就会在sky之后，自然就能覆盖了。

内容来源于stack exchange