tailwindcss自定义css样式覆盖:

有如下自定义样式:
addUtilities({
        ".all-initial": { all: "initial" },
        ".all-inherit": { all: "inherit" },
        ".all-revert": { all: "revert" },
        ".all-unset": { all: "unset" },
      });
      
这段代码定义了 4 个新的 CSS 工具类，每个类都对应 CSS all 属性的不同值。
all 属性可以同时作用于所有 CSS 规则（如 color、margin、padding、display 等），避免单独重置多个属性。


类名	             等效 CSS	       说明
.all-initial    all: initial;       将所有继承和非继承属性重置为默认值（与浏览器的初始样式一致）。
.all-inherit    all: inherit;       让所有属性继承父元素的样式（包括默认不会继承的属性，如 margin）。
.all-revert     all: revert;        让样式回退到浏览器的用户代理样式表或父级的样式规则。
.all-unset      ll:  unset;         对 继承属性（如 color）应用 inherit，对 非继承属性（如 display）应用 initial。

什么是用户代理（UA）样式表？
用户代理（User Agent）样式表 就是浏览器默认提供的 CSS 规则，比如：
<h1> 默认是 加粗 且 比普通文本大。
<button> 默认有 边框、背景颜色 和 内边距。
<ul> 默认带有 列表项圆点（bullet points）。

👉 这些默认样式就是浏览器的 UA 样式表 提供的。

举例:

<ul>
  <li>默认样式</li>
</ul>

<ul class="no-style">
  <li>自定义无样式</li>
</ul>

<ul class="no-style revert">
  <li>恢复默认样式</li>
</ul>

.no-style {
  list-style: none;
  padding: 0;
  margin: 0;
}

.revert {
  all: revert;
}

结果:

默认样式 → 带 • 圆点
自定义无样式 → 没有 • 圆点
恢复默认样式 → 重新带回 • 圆点

什么时候用 revert？

撤销项目里写的 CSS，让元素回归浏览器默认的行为。
想要去掉框架样式（比如 Bootstrap、Tailwind 可能会覆盖默认样式）。
想保留继承关系，但又不想用 unset 影响非继承属性