Line Height 行高
控制元素的行高（行间距）的实用工具。
| Class | Properties |
|---|
基本用法
相对行高
使用 leading-none , leading-tight , leading-snug , leading-normal , leading-relaxed 和 leading-loose 实用程序，根据当前字体大小为元素提供相对行高。
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="leading-normal ...">So I started to walk into the water...</p>
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-loose ...">So I started to walk into the water...</p>固定行高
使用 leading-{size} 实用工具为元素提供固定行高，而不考虑当前的字体大小。当您需要对元素的最终大小进行非常精确的控制时，这些工具非常有用。
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="leading-6 ...">So I started to walk into the water...</p>
<p class="leading-7 ...">So I started to walk into the water...</p>
<p class="leading-8 ...">So I started to walk into the water...</p>有条件地应用
悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:leading-loose 仅在悬停时应用 leading-loose 实用程序。
<p class="leading-none hover:leading-loose">
<!-- ... -->
</p>有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:leading-loose 仅在中等屏幕尺寸及以上应用 leading-loose 实用程序。
<p class="leading-none md:leading-loose">
<!-- ... -->
</p>要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。
覆盖默认行高
值得注意的是，默认情况下，Tailwind 的字体大小工具会分别设置自己的默认行高。这意味着每当您使用响应式字体大小工具，比如 sm:text-xl ，您为较小的断点设置的任何显式行高都将被覆盖。
<!-- 在 `md` 断点处将重写 `leading-loose` 类 -->
<p class="text-lg leading-loose md:text-xl">
Maybe we can live without libraries...
</p>如果您想在设置特定断点的字体大小后覆盖默认行高，请确保也设置特定断点的行高：
<!-- 在 `md` 断点处将重写 `leading-loose` 类 -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
Maybe we can live without libraries...
</p>通常情况下，在不同字体大小上使用相同的行高通常不会给您带来良好的排版效果。行高应该随着字体大小的增加而逐渐减小，因此默认行为通常可以节省大量工作。如果您发现自己在与之作斗争，您可以随时自定义您的字体大小比例，以不包括默认行高。
使用自定义值
定制您的主题
默认情况下，Tailwind 提供了六个相对和八个固定的 line-height 实用工具。您可以通过自定义 Tailwind 主题配置的 lineHeight 部分来更改、添加或删除这些内容。
module.exports = {
theme: {
extend: {
lineHeight: {
'extra-loose': '2.5',
'12': '3rem',
}
}
}
}有关自定义默认主题的更多信息，请参阅主题自定义文档。
任意值
如果您需要使用一个与主题无关的 line-height 值，可以使用方括号来根据任意值动态生成属性。
<p class="leading-[3rem]">
<!-- ... -->
</p>有关任意值支持的更多信息，请参阅任意值文档。