Tailwind的list工具类仅控制符号类型和位置，缩进需手动用pl-*类调整；list-inside可使符号居中对齐文字基线，但需配合减小padding-left并微调pt/mt；自定义符号时必须加list-none禁用原生样式。
怎么用 Tailwind 的 list 工具类控制列表缩进和符号
默认的 list-disc、list-decimal 这些工具类能快速统一外观，但它们只管「符号类型」和「位置」，不管缩进量。真正影响对齐的是 pl-*（padding-left）——必须手动加。
-
list-disc/list-circle/list-square控制符号形状，仅对 -
list-decimal/list-lower-roman等只对 - 符号默认紧贴文字，想留空隙就得配
pl-5或pl-6，不然和段落文本不对齐 - 嵌套列表要单独处理内层
pl-，Tailwind 不自动继承缩进
如何让无序列表符号居中对齐文字基线
Tailwind 默认把符号画在行框顶部，看起来像“悬”在文字上方。这不是 bug，是 CSS list-style-position: outside 的行为。想视觉上对齐，得用 list-inside 把符号拉进内容流，再微调 pt-0.5 或 mt-0.5 补偿高度差。
ul {
@apply list-disc list-inside pl-0;
}
ul li {
@apply pt-0.5;
}
注意：list-inside 会让符号参与盒模型计算，此时 pl-* 要减小（比如从 pl-5 改成 pl-2），否则整体向右偏移太多。
有序列表编号和文字间距不一致？检查 space-y 和 leading
space-y-4 这类垂直间距工具类作用于 元素之间，但编号本身高度受 line-height 影响。如果字体用了 variable font 或设置了 leading-tight，数字可能被截断或上下挤压。
立即学习“前端免费学习笔记（深入）”；
- 优先用
leading-normal保底，避免leading-none导致编号贴顶 -
space-y-3比space-y-4更适合小号字体（如text-sm） - 若编号和文字底部明显错位，加
align-bottom到li，而不是靠flex大法硬调
自定义符号（比如箭头、图标）时为什么 list-none 必须加
用 before:content-["→"] 或 bg-[url(./arrow.svg)] 替换原生符号时，老式浏览器仍可能渲染默认圆点。必须显式写 list-none 关掉原生样式，否则双符号并存。
ul.custom-arrow {
@apply list-none;
}
ul.custom-arrow li::before {
@apply content-["→"] mr-2 text-gray-500;
}
另外，list-none 不影响 pl-，所以缩进还得自己控——这点容易漏，结果图标贴着左边边界。
list 类只是开关，不是全自动排版器。符号对齐、嵌套缩进、字体适配这些细节，全靠组合 pl-、list-inside、leading 手动校准。别指望一个类解决所有问题。 
