Tailwind CSS自定义max断点媒体查询响应式样式覆盖失效问题

Tailwind 响应式工具类的优先级，完全由 screens 配置项中断点的定义顺序决定：配置中越靠后出现的断点，生成的媒体查询CSS规则在样式表中位置越靠后，优先级越高，和断点本身的数值大小、类在className里的书写顺序都没有关系。

你当前的screens是按断点数值从小到大排列的：414 → 500 → 630 → 720 → 840 → 1000 → 1230，这就导致840断点的优先级高于500断点。当屏幕宽度小于500px时，会同时满足max-width:840px和max-width:500px两个媒体查询条件，此时优先级更高的840:-top-[350px]会覆盖500:-top-[150px]的样式，和你预期的小断点覆盖大断点效果完全相反。

调整screens配置的排列顺序，对于max-width规则的断点，需要从大到小排列，保证越小的断点在配置中位置越靠后，优先级越高：

screens: {
  1230: { max: "1230px" },
  1000: { max: "1000px" },
  840: { max: "840px" },
  720: { max: "720px" },
  630: { max: "630px" },
  500: { max: "500px" },
  414: { max: "414px" },
}

调整后重新运行项目，屏幕宽度小于500px时，500:-top-[150px]会正常覆盖840断点的top样式，符合预期。

注意：不要尝试通过调整className里的类书写顺序修复问题，Tailwind生成CSS的规则顺序只和全局screens配置有关，和类在元素上的书写顺序无关。

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