CSS层叠算法与Tailwind类的覆盖问题及原理咨询

核心原因：CSS层叠的「代码顺序优先级」+ Tailwind的CSS生成规则 #

Tailwind的所有工具类都是单类选择器（比如.p-2、.py-8），它们的CSS特异性完全相同（权重为0,0,1,0）。在特异性一致的情况下，CSS的生效优先级由规则在样式表中的出现顺序决定：后定义的规则会覆盖先定义的规则，和HTML中类的书写顺序无关。

具体到你的两个例子：

例子1：py-8 px-8 无法被 p-2 覆盖

Tailwind生成CSS时，会把细分方向的工具类（比如py-*、px-*，仅控制单个/两个方向的内边距）放在通用方向的工具类（比如p-*，控制四个方向的内边距）之后。

样式表中会先出现.p-2的规则：

.p-2 {
  padding: 0.5rem; /* 对应p-2的内边距 */
}

然后再出现.py-8和.px-8的规则：

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

由于.py-8和.px-8在样式表中定义更晚，即使你在HTML里把p-2写在最后，这两个类的规则也会覆盖p-2对应的方向内边距，最终呈现的是py-8 px-8的效果。

例子2：px-20 无法被 px-8 覆盖

同方向的工具类（比如都是px-*），Tailwind会按照类名字符串的字典序来生成CSS规则。

字符串排序时，px-20会排在px-8前面（因为字符2的ASCII码小于8），所以样式表中先出现.px-20的规则：

.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}

之后才是.px-8的规则：

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

所以不管HTML里把px-8还是px-20写在后面，.px-8的规则因为在样式表中更靠后，优先级更高，会覆盖.px-20的内边距设置。

解决方法 #

如果需要强制覆盖，可以使用Tailwind提供的!important变体，比如!p-2或者!px-20，这类变体的规则会带有!important声明，优先级高于普通工具类。另外，也可以通过自定义Tailwind配置调整工具类的生成顺序，但这通常不推荐，会增加维护成本。

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