tailwind css 中恢复 ul/ol 列表默认样式的完整方案：tailwind 的 preflight 会重置 ul/ol 的 list-style、margin 和 padding，导致列表丢失缩进与项目符号；只需在 base 层统一设置 `list-style: revert; margin: revert; padding: revert;` 即可精准还原浏览器原生列表行为。
Tailwind CSS 的 Preflight 是一套现代化的 CSS 重置机制，旨在提供跨浏览器一致的基础样式。然而，它会主动移除
- 和
- 的原生表现——包括项目符号（bullets / numbers）、左侧内边距（padding-left）以及上下外边距（margin-top/margin-bottom）。这虽利于构建自定义组件，但当项目需保留语义化 HTML 的默认渲染（例如文档内容区、Markdown 渲染输出或 CMS 导入内容）时，会导致嵌套列表扁平化、缩进消失、层级结构不可见等问题。
要精准、安全地仅恢复列表的原生行为（而非全局禁用 Preflight），推荐在 application.tailwind.css（或你项目的主 Tailwind 入口 CSS 文件）中使用 @layer base 注入覆盖规则：
@layer base {
ul,
ol {
list-style: revert;
margin: revert;
padding: revert;
}
}✅ 为什么必须同时声明三者？
- list-style: revert 恢复项目符号类型（disc, decimal 等）和位置；
- margin: revert 恢复浏览器默认的上下间距（如 Chrome 对 ul 应用 margin-block: 1em）；
- padding: revert 恢复关键的左侧内边距（如 padding-inline-start: 40px），这是嵌套列表实现缩进的核心——仅靠 list-style 无法还原层级缩进。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 all: revert —— 它会意外重置 display、color 等无关属性，引发不可控副作用；
- 不要改用 initial 或 unset：initial 将 padding 重置为 0，unset 在继承属性上行为不一致，均无法可靠还原浏览器默认值；
- revert 是现代 CSS 标准（CSS Cascading Level 4），已获 Chrome 87+、Firefox 69+、Safari 14.1+ 全面支持，Tailwind 项目通常无需兼容更旧版本；
- 若需局部控制（如仅对 .content ul 恢复），可将选择器升级为 .content ul, .content ol，保持作用域最小化。
最终效果将严格匹配原生浏览器行为：顶层列表带标准圆点与缩进，二级
- 自动向右偏移并显示空心圆，三级继续缩进并切换符号（如 circle → square），完全符合 HTML 语义预期。此方案轻量、可维护、零侵入，是 Tailwind 生态中恢复特定元素默认样式的最佳实践。
