Tailwind 的 Preflight 会重置 ul/ol 的 list-style、margin 和 padding，导致项目符号消失、嵌套缩进丢失；需在 @layer base 中同时声明 list-style: revert; margin: revert; padding: revert; 才能精准还原浏览器默认层级缩进与符号。
为什么 ul/ol 的缩进总是偏左或没层次感
Tailwind 的 Preflight 会把 ul 和 ol 的 list-style、margin、padding 全部重置为无值状态，结果就是项目符号消失、嵌套列表不缩进、二级 ul 贴着一级文字排布。这不是你漏写了 pl-5，而是浏览器原生的缩进逻辑被主动抹掉了。
-
list-style: revert恢复 disc/decimal 类型和位置，但不恢复缩进 -
margin: revert恢复上下间距（比如 Chrome 的margin-block: 1em） -
padding: revert才是关键——它还原padding-inline-start: 40px，这是嵌套缩进的物理基础
如何在 Tailwind 里精准还原浏览器默认缩进
别碰 all: revert，它会把 display、color 也拉回初始值，按钮变透明、链接变黑底白字。直接在 application.tailwind.css 的 @layer base 里加：
@layer base {
ul,
ol {
list-style: revert;
margin: revert;
padding: revert;
}
}
这个组合能严格匹配 Chrome/Firefox/Safari 的原生行为：顶层圆点 + 40px 左内边距，二级自动右移并换空心圆，三级再缩进并切方块——完全符合 HTML 语义层级。
设计稿要求「缩进 24px」但 revert 不可控怎么办
当设计稿明确指定像素值（比如缩进必须是 24px 而非浏览器默认的 40px），revert 就不够用了。此时应放弃还原，转为显式控制：
- 用
list-disc或list-decimal开启符号，它们只设list-style-type，不影响缩进 - 缩进必须配
pl-6（对应 1.5rem = 24px）或自定义pl-[24px] - 嵌套列表要单独处理：
.content ul ul { @apply pl-8; }，Tailwind 不继承缩进 - 若用
list-inside，pl-值得减小（如pl-2），否则符号整体右推，破坏对齐
最容易被忽略的缩进耦合点
缩进不是独立属性，它和三个东西强绑定：
-
list-style-position：设inside时，符号进入文本流，pl-必须配合box-sizing: border-box预留空间，否则 Firefox 下序号可能被截断 -
font-size变化时，pl-6固定为 24px 不会放大，而设计稿常按文字大小等比缩进——这时该用pl-[1.5rem]或 CSS 自定义属性 - Markdown 渲染器（如 remark）输出的
ul没 class，靠全局规则生效；CMS 导入内容同理，所以恢复逻辑必须写在@layer base，不能局限在某个组件 scoped class 里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
