Tailwind的行高类名是相对字体大小的比例值，非固定像素；leading-tight在text-base下为1.25（20px），leading-loose为2（32px），随字号缩放；单行按钮慎用leading-tight以防文字贴边；leading-loose用于列表项易致错位，建议改用space-y或flex items-center；自定义leading-[22]需版本支持或配置theme.extend.lineHeight。
行高类名到底对应多少像素
Tailwind 的 leading-tight、leading-loose 并不直接等于固定像素值，而是基于当前字体大小的相对比例。比如在 text-base（通常 1rem / 16px）下，leading-tight 是 1.25（即 20px 行高），leading-loose 是 2（即 32px）。实际值会随 font-size 缩放——这点常被忽略，导致在 text-sm 或 text-xl 下行距“看起来不对”。
常见错误现象：leading-loose 在大字号下显得过于松散，或和设计稿像素值对不上。
- 查具体换算：打开 Tailwind 官网的
leading文档页，对照你当前fontSize对应的lineHeight值 - 需要精确控制时，优先用
leading-[24]（任意数字，单位是 px）而不是依赖预设类 - 注意：自定义
lineHeight需在theme.extend.lineHeight中注册，否则leading-[24]可能不生效（v3.3+ 默认支持任意数值）
为什么 leading-tight 在按钮里反而挤成一团
leading-tight 的本质是缩小行高，但它只对多行文本或含 <br> 的内联内容起作用。单行按钮文字若本身没换行、又设置了 h-8 这类固定高度，过小的行高会让上下留白消失，文字“贴”到容器边缘，视觉上像被压缩。
使用场景：标题、卡片摘要等需要紧凑排版的地方合适；但按钮、标签、输入框提示文字慎用。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误用于单行且有固定
height的元素 - 替代方案：
leading-normal更安全，或手动加py-1补垂直内边距 - 如果真要压紧行距，配合
align-middle和h-fit能缓解裁剪问题
leading-loose 导致列表项错位怎么办
当 leading-loose 应用于 <li> 或 Flex 容器子项时，增大的行高会扩大基线（baseline）位置，而 Flex 默认 align-items: stretch，容易让相邻项因行高差异出现视觉错位，尤其和图标、徽章并排时。
性能影响几乎为零，但布局稳定性差——这不是 bug，是 CSS 行盒模型的自然表现。
- 给父容器加
flex items-center强制垂直居中，覆盖基线对齐 - 改用
space-y-2控制项间距，而非靠行高撑开 - 若必须用
leading-loose，建议统一应用于整块文本区域（如<p class="leading-loose">），而非单个列表项
自定义 leading 值为何不生效
直接写 leading-[22] 却没效果？大概率是 Tailwind 版本或配置问题。v3.0+ 默认启用 JIT 模式，但未在 theme.extend.lineHeight 中声明的数值不会被扫描生成。
错误信息：class="leading-[22]" wasn't found（开发时控制台警告）或样式完全不应用。
- v3.3+ 可直接用任意数字，但需确认
content配置已包含该文件路径 - v3.0–v3.2：必须在
tailwind.config.js的theme.extend.lineHeight里添加，例如{"22": "22px"} - 别漏掉单位——
leading-[22px]和leading-[22]在某些版本行为不同，推荐带px
最易被忽略的一点：行高类名只作用于内联级盒子（inline box），如果元素是 block 或 flex，它影响的是该元素内文字的行盒，而不是整个元素的高度。想调整个体高度，得配 min-h- 或 h-。
