tailwind的leading-类是相对字体大小的比例值，非固定像素；如text-base（16px）下leading-tight为1.25×16=20px，leading-loose为2×16=32px，实际值随字号缩放，需按当前font-size换算。
直接用 leading- 系列工具类，但得清楚它不是固定像素值，而是相对比例——这点不搞明白，行高就总“不对劲”。
leading-tight / leading-loose 实际是多少像素？
它们是乘数，不是 px 值。比如 text-base 默认是 16px，leading-tight 就是 16 × 1.25 = 20px；leading-loose 是 16 × 2 = 32px。但一旦换到 text-xl（通常 1.25rem / 20px），leading-loose 就变成 40px，不是设计稿里固定的 32px。
- 别拿 Figma 里的「行高 32px」直接套
leading-loose，先确认当前字号 - 查具体换算：打开 Tailwind 官网
leading文档页，对照你项目里fontSize对应的lineHeight值 - 单行按钮慎用
leading-tight，文字容易贴顶贴底；列表项别盲目用leading-loose，易和space-y冲突
需要精确控制 24px 行高怎么办？
写 leading-[24] 最快，但注意版本和配置：
- Tailwind v3.3+ 默认支持任意数值，
leading-[24]直接生效 - v3.2 及更早版本需在
tailwind.config.js的theme.extend.lineHeight里注册，否则无效 -
leading-[24]中的24单位是 px，不是 rem —— 不要写成leading-[1.5]或leading-[24px] - 若同时设了
text-sm（14px）和leading-[24]，实际行高就是 24px，不随字号缩放
为什么加了 leading-6 但文字没居中？
常见原因是元素高度（h-）和行高不匹配，或者父容器没给文本留出垂直空间。
-
leading-6对应 line-height: 1.5rem（24px），但若容器h-12（3rem / 48px），光靠行高无法让文字垂直居中 - 错误写法：
<div class="h-12 leading-6">文字</div>→ 文字会靠上 - 正确解法二选一：
– 改高度：h-6（匹配 line-height）
– 改布局：flex items-center，把行高当辅助而非唯一手段 - 特别注意：
leading-none或leading-[1]会让「龜」「龍」等字形溢出，因为 line-height: 1 压缩掉了字体上下的度量空间
真正难的不是写对类名，而是意识到 leading- 控制的是行框（line box）高度，不是视觉上的“文字上下留白”。很多错位问题，根源在于混淆了行高、容器高、字体度量三者的关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
