为何Tailwind CSS中hidden类无法覆盖block类？类顺序有何影响？

1. 为何hidden类未覆盖block类？ #

核心原因是CSS优先级差异。Tailwind为peer-[.is-dirty]:peer-required:block生成的CSS选择器是复合结构，示例如下：

.peer.is-dirty:required ~ .peer-\[\.is-dirty\]\:peer-required\:block {
  display: block;
}

而基础的hidden类对应的是单一类选择器：

.hidden {
  display: none;
}

复合选择器的优先级高于单一类选择器，所以当输入框同时具备is-dirty类和required属性时，block的样式会强制覆盖hidden的display: none，错误提示就会显示出来。

2. 类顺序是否重要？如何影响规则行为？ #

在这个场景下，HTML中的类顺序不会影响最终样式。Tailwind类的优先级由CSS选择器的结构决定，和HTML里的类排列先后无关。

不过有个通用CSS规则需要注意：如果两个类的CSS优先级完全相同，那么CSS文件中后定义的规则会覆盖前面的。但回到你的代码，peer-[.is-dirty]:peer-required:block的优先级远高于hidden，所以不管你把hidden放在类列表的前面还是后面，只要触发条件满足，block都会生效。

当前写法的逻辑是成立的：当输入框不满足is-dirty + required的条件时，block的规则不会被触发，hidden的display: none就会生效，错误提示隐藏。

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