Tailwind的leading-类控制行框高度（line-height比例值），tracking-类控制字符间距（letter-spacing），二者均非留白；混淆职责是90%排版问题根源。
直接用 leading- 控制行高、tracking- 控制字间距，但必须清楚它们不是“上下/左右留白”，而是分别作用于 line box 和 letter spacing —— 混淆这点，90% 的排版问题就出在这儿。
为什么加了 leading-relaxed 文字还是贴顶？
因为 leading- 类只设置 line-height，不改变容器高度或对齐方式。它影响的是行框（line box）内部基线距离，不是块级元素的垂直居中逻辑。
- 错误写法：
<div class="h-12 leading-relaxed">文字</div>→ 行高是 1.625 × font-size，但容器固定高 3rem，文字默认靠上 - 正确解法二选一：
flex items-center布局，或把容器高设为匹配行高（如h-[2.5rem]） - 单行按钮慎用
leading-tight：它会让行框收缩，文字视觉上“顶到容器边”，尤其搭配h-8这类固定高度时 - 大字号标题（如
text-4xl）配leading-none或leading-tight易截断降部字母（g、y、p），建议至少用leading-snug（1.375）起手
leading-[24] 和 leading-6 到底差在哪？
前者是绝对像素值（24px），后者是相对比例（leading-6 默认编译为 line-height: 1.5rem，即 24px 仅当根字号为 16px 时成立）。
-
leading-[24]：v3.3+ 默认支持，单位是 px；写成leading-[1.5]或leading-[24px]都无效 -
leading-6：依赖 Tailwind 默认 theme.spacing，对应 1.5rem；若项目自定义了theme.spacing['6'] = '1.25rem'，那它就变成 20px - 需要和设计稿像素值对齐（比如 Figma 标「行高 24px」），优先用
leading-[24]，别猜预设类 - 自定义数值类（如
leading-9）必须提前在tailwind.config.js的theme.extend.leading中注册，否则不生效
tracking-tight 为什么有时让文字发闷？
tracking-tight 是 letter-spacing: -0.025em，本质是微调字符间距，不是“让字体变高级”的开关 —— 它只在特定条件下有效。
立即学习“前端免费学习笔记（深入）”；
- 只对大号无衬线标题（
text-4xl+font-sans+font-bold）有正向效果；用在正文或小字号上会降低可读性 - 必须配合
font-sans：系统字体栈不同（macOS SF Pro vs Windows Segoe UI），负字距渲染效果差异明显 - 别和
uppercase同时用：全大写本身已有视觉收紧感，叠加后字母容易粘连 - 它完全不影响
line-height，所以调整字距后如果行距没同步优化，整体节奏仍会失衡
真正难的不是类名写对，而是意识到 leading- 管行框高度、tracking- 管字符间隙、margin/padding 管块级距离 —— 三者职责分明，混着用必踩坑。尤其是自定义字体或 variable font，其 ascent/descent 度量可能让默认 leading 值完全不够用，这时得手动加一点余量，而不是反复调 tracking。
