leading 对应 line-height 而非 margin/padding，控制文本行内基线距离，多行或含升/降部字体时才明显；单行短文本常无变化，配置不当易致文字截断。
leading 类对应的是 line-height 而不是 margin 或 padding
很多人一看到 leading 就下意识觉得是“上下间距”，结果加了 leading-8 发现文字没变高，反而和上下元素挤在一起——这是因为 leading 控制的是行内盒的 line-height，影响的是单行或多行文本内部的基线距离，不是块级外边距。
它只在文本有换行（比如 <p></p>、<div> 包含多行内容）或字体本身存在升部/降部时才明显生效；单行短文本可能完全看不出变化。
<ul>
<li>
<code>leading-none → line-height: 1，字形紧贴，易重叠
leading-tight → line-height: 1.25，适合标题，紧凑但不压抑leading-snug → line-height: 1.375，正文常用起点leading-relaxed → line-height: 1.625，阅读友好，适合长段落leading-loose → line-height: 2，留白多，适合强调或手写风自定义 leading 值必须先配置 theme.leading
Tailwind 默认只提供上述命名类，像 leading-9 或 leading-[2.1] 这种不会自动生效——除非你手动扩展配置。
在 tailwind.config.js 的 theme.extend.leading 里加键值对，例如：
module.exports = {
theme: {
extend: {
leading: {
'9': '2.25rem',
'10': '2.5rem',
'extra': '2.8',
}
}
}
}
注意：数值类如 leading-9 是按 rem 解析的（基于根字号），而 leading-[2.8] 是直接透传 CSS 值，后者更灵活但需自己确保单位/比例合理。
- 用数字后缀（如
leading-9）需配配置，否则无效 - 用方括号语法（如
leading-[2.8]）可跳过配置，但构建时会生成额外 CSS - 值为无单位数字（如
1.5）表示相对 font-size 的倍数；带单位（如24px）则为绝对行高
leading 和 font-size 不匹配时容易导致文字截断
当 font-size 很大（比如 text-5xl ≈ 3rem）但 leading 太小（如 leading-3 ≈ 0.75rem），行高远小于字号，文字上下会被裁掉——浏览器仍渲染完整字形，但容器高度不够，视觉上像“被砍头去脚”。
典型错误场景：卡片标题用 text-4xl + leading-4，结果“g”“y”“p”等降部字母看不见。
- 检查浏览器开发者工具中该元素的 computed
line-height和font-size比值，理想区间通常在 1.2–1.8 - 避免对大字号文本使用
leading-none或leading-tight - 若用自定义字体，尤其要注意其 metrics（如 ascent/descent），有时需手动调高
leading补偿
响应式 leading 必须配合断点前缀，不能靠父容器继承
md:leading-relaxed 有效，但 leading-relaxed md:leading-loose 在小屏下不会自动回退到 relaxed——Tailwind 的响应式类是覆盖逻辑，不是条件判断。如果没写基础类，断点类就成唯一生效项。
也就是说，md:leading-loose 单独用，意味着「仅在 md 及以上生效，xs/sm 下无行高设置」，此时会回退到浏览器默认（通常是 1.2 左右），很可能不一致。
- 正确写法：
leading-snug md:leading-relaxed lg:leading-loose - 移动端优先时，先写最小断点的类，再逐级覆盖
- 不要依赖 CSS 继承来“省代码”，
leading不会从父级<div> 自动传给子 <code><span></span>，每个文本容器都得单独设 实际项目里最常漏掉的，是字体加载完成前的行高抖动，以及 variable font 的line-gap影响——这两处 Tailwind 的leading类压根不接管，得靠@layer base或内联style补位。
