Tailwind CSS 4.1.18中如何反转全局样式与自定义类的优先级（无需使用!重要性标记）

阿华AIGC实验室

2026-3-30

兄弟，我懂你这种不想碰!important的纠结——毕竟那玩意儿用多了，后期维护简直是噩梦。你的问题核心其实是元素选择器的优先级默认比类选择器高：你给h1-h6直接加的全局样式（元素选择器），优先级压过了Tailwind的工具类（类选择器），所以哪怕你加了.text-primary-500也没效果。下面给你几个Tailwind 4.1.18里能用的靠谱方案，完全不用碰!important：

方案一：用:where()伪类降低全局标题样式的优先级
这是最省心的方案，不用改任何HTML，只需要调整你index.css里的全局样式写法就行。:where()会把里面选择器的优先级直接降到0，这样Tailwind的工具类（类选择器，优先级为10）随便就能覆盖它：
```
/* 把你原来的全局标题样式改成这样 */
@layer base {
  :where(h1, h2, h3, h4, h5, h6) {
    @apply text-gray-800;
  }
}
```
解释下：原来的h6是元素选择器，优先级为1，套上:where()后优先级直接变0，而.text-primary-500是类选择器，优先级10，自然能轻松覆盖，完全不需要额外标记。而且这个写法完全符合Tailwind的层规范，不会有样式冲突的隐患。
方案二：把全局标题样式改成类选择器（需调整HTML）
如果你不想用:where()，也可以把全局的标题样式改成类，再手动给所有标题元素加上这个类。这样两个类的优先级相同，后面的类会自动覆盖前面的：
首先在CSS里定义基础类：
```
@layer base {
  .title-base {
    @apply text-gray-800;
  }
}
```
然后在HTML里给标题元素加上这个基础类，再跟自定义工具类：
```
<h6 class="title-base text-primary-500">text</h6>
```
这里要注意，把.text-primary-500写在.title-base后面（优先级相同时，后面的样式会覆盖前面的）；或者你也可以不用管顺序，因为Tailwind的utilities层本来就会在base层之后加载，工具类的样式会自动排在后面。
方案三：确保全局样式放在正确的Tailwind层里
如果你之前的全局样式是直接写在@tailwind指令外面（比如@tailwind utilities之后），那即使优先级相同，后面的样式也会覆盖前面的。所以一定要把全局的标题样式放到@layer base里，让Tailwind帮你管理样式的层叠顺序，避免很多优先级的坑——不过这个方案只解决顺序问题，没法直接处理元素选择器优先级高于类的核心问题，建议和方案一结合使用。