leading-tight 对应 line-height: 1.25，是相对于 font-size 的无单位比例值，适用于多数标题类文本，但需警惕字体内置行距导致的贴边或截断问题。
leading-tight 实际对应多少行高？别猜，看源码值
它不是固定像素，而是相对 font-size 的无单位比例值。Tailwind 默认配置中，leading-tight 编译为 line-height: 1.25（即 125%），适用于多数标题类文本，能压缩行间距、提升密度。但要注意：若字体本身带有较大内置行距（比如某些 variable font 或 icon font），leading-tight 可能导致文字贴边甚至截断。
- 验证方式：打开浏览器开发者工具，选中元素，查看 computed 栏的
line-height值是否真为1.25 - 慎用场景：配合
text-xs或text-2xl+时，需肉眼确认基线对齐是否自然 - 不兼容老式写法：它不会覆盖你手动写的
style="line-height: 2rem"，内联样式优先级更高
leading-relaxed 是“宽松”还是“安全”？看它干了什么
leading-relaxed 对应 line-height: 1.625（162.5%），比默认 leading-normal（1.5）略松，但远不如 leading-loose（2.0）。它的真正价值是“在保持可读性前提下避免意外重叠”——尤其适合段落正文、表单标签、卡片描述等需要呼吸感又不能太散的内容。
- 典型误用：给
h1加leading-relaxed，反而削弱视觉重量；应优先用leading-tight或自定义 - 和字体关系大：思源黑体、PingFang 等中文字体在
1.625下表现稳定；但 Noto Sans SC 小字号下可能显空，建议搭配text-base起用 - 响应式限制：Tailwind 默认不提供
sm:leading-relaxed这类断点变体，需自行在tailwind.config.js中扩展
想微调行高？别改 class，直接用 arbitrary value
硬编码类名（如 leading-[1.4]）比复制一堆自定义 theme.extend.lineHeight 更快，且支持任意数值，包括小数、单位（leading-[1.8em]）、甚至 CSS 变量（leading-[var(--my-line-height)]）。
- 必须带方括号：写成
leading-1.4无效，会匹配不到任何规则 - 注意转义：若值含斜杠（如
1.5/2），需写成leading-[1.5\/2]，否则构建时报错 - 性能无负担：arbitrary value 是 JIT 模式原生支持，不会增大未使用 CSS 体积
- 调试技巧：临时加
leading-[2]看最大安全间距，再逐步回调到 1.45、1.52 等中间值
为什么有时加了 leading-* 却没生效？三个高频原因
行高失效往往不是 Tailwind 的问题，而是层叠或渲染逻辑被干扰。最常踩的坑集中在三处：
- 父容器设了
overflow: hidden且子元素行高撑出高度，视觉上像“没生效”，实则是内容被裁剪 - 用了
display: flex+align-items: center的容器，flex 项的line-height不影响交叉轴对齐，此时该调padding或min-height - 字体加载中（
font-display: swap）导致初始渲染用 fallback 字体，其 metrics 与目标字体不同，行高计算错位；可加font-synthesis: none或监听fontface.load后重排
复杂点在于：行高本质是「行框盒子」的计算结果，它同时受 font-size、vertical-align、inline-box 高度、甚至相邻 inline 元素影响。Tailwind 的类只是设置了一个属性值，不解决底层排版上下文问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
