Tailwind 行高语法
在 Tailwind CSS 中，我们可以使用 “leading-*” 相关的类名来定义文本的行高（相当于传统 CSS 中的 line-height）。
语法：
leading-{值}说明：
行高的 “值” 可以是 3 种：① 语义化类名；② 数字（4px 系统）；③ 任意值。
如果是语义化类名，常用的如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| leading-none | line-height: 1; | 无额外行距 |
| leading-tight | line-height: 1.25; | 紧凑 |
| leading-snug | line-height: 1.375; | 舒适 |
| leading-normal（默认） | line-height: 1.5; | 正常 |
| leading-relaxed | line-height: 1.625; | 宽敞 |
| leading-loose | line-height: 2; | 极宽 |
如果是数字，此时这类类名是使用 “4px” 倍数的固定像素值，比如：
- leading-1：表示行高为 4px。
- leading-2：表示行高为 8px。
- leading-3：表示行高为 12px。
- leading-4：表示行高为 16px。
- ……
Tailwind CSS 行高示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来定义元素的行高。
示例 1：定义行高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 max-w-sm">
<p class="leading-tight bg-red-300">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。所有教程均提供丰富示例，让你边学边练，快速提升编程技能。
</p>
<p class="leading-relaxed bg-green-300">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。所有教程均提供丰富示例，让你边学边练，快速提升编程技能。
</p>
</body>
</html>页面效果如下图所示。
分析：
第 1 个段落使用了 leading-tight（1.25倍），此时可以会发现文字上下挨得很近。这种行高适合用于字数不多的标题上，但不适合用于大段正文。
第 2 个段落使用了 leading-relaxed（1.625倍），这是网页设计中被公认为是最舒适的阅读比例之一。文字之间有适度的留白，看起来非常通透。
Tailwind CSS 字号与行高 “组合”
在实际开发中，我们往往是在设置字体大小时，顺便把行高也一起设置了。Tailwind CSS 为我们提供了一个十分方便的组合语法。
语法：
text-{字号}/{行高}示例 2：字号与行高组合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 max-w-sm">
<p class="text-[18px]/[32px] bg-green-300">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。所有教程均提供丰富示例，让你边学边练，快速提升编程技能。
</p>
</body>
</html>页面效果如下图所示。
分析：
text-[18px]/[32px] 表示将 font-size 定义为 18px，并且将 line-height 定义为 32px。
常见问题
1. 为什么给元素加上了 text-xl 之后，即便不写 leading-* 相关类名，行高好像也变了呢？
前面 “Tailwind 字体大小” 一节中我们提到过，当使用 text-xl、text-2xl 这种预设类名时，Tailwind CSS 会自动帮你搭配一个合适的默认行高。
在实际开发中，只有当我们对 Tailwind CSS 自动搭配的效果不满意时，才需要手动去写 leading-*。
2. 为什么我设置了 leading-none，文字的上下部分好像被切掉了一点？
leading-none 代表行高为 1（即行高等于字号）。如果你的字体包含了一些特殊的上标或下标（比如英文字母 y、g、j 的尾巴），在某些浏览器中可能会被细微地裁剪。
因此对于正文来说，行高至少要使用 leading-normal。
