line-height
用于控制元素行高（leading）的工具类。
快速参考
| 类 | 属性 |
|---|---|
text-<size>/<number> | font-size: <size>; line-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) | font-size: <size>; line-height: var(<custom-property>); |
text-<size>/[<value>] | font-size: <size>; line-height: <value>; |
leading-none | line-height: 1; |
leading-<number> | line-height: calc(var(--spacing) * <number>); |
leading-(<custom-property>) | line-height: var(<custom-property>); |
leading-[<value>] | line-height: <value>; |
示例
基础示例
使用 text-sm/6 和 text-lg/7 等字体大小工具类，可同时设置元素的字体大小和行高：
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.
<!-- [!code classes:text-base/6,text-base/7,text-base/8] -->
<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/8 ...">So I started to walk into the water...</p>每个字体大小工具类在未单独指定时也会设置默认行高。可在 font-size 文档中了解这些值以及如何自定义它们。
独立设置
使用 leading-6 和 leading-7 等 leading-<number> 工具类，可独立于字体大小设置元素的行高：
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.
<!-- [!code classes:leading-6,leading-7,leading-8] -->
<p class="text-sm leading-6">So I started to walk into the water...</p>
<p class="text-sm leading-7">So I started to walk into the water...</p>
<p class="text-sm leading-8">So I started to walk into the water...</p>移除行高间距
使用 leading-none 工具类，将元素的行高设为与字体大小相等：
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:leading-none] -->
<p class="text-2xl leading-none ...">The quick brown fox...</p>使用自定义值
使用 leading-[<value>] 等工具类，可根据完全自定义的值设置行高：
<p class="leading-[1.5] ...">
Lorem ipsum dolor sit amet...
</p>对于 CSS 变量，也可以使用 leading-(<custom-property>) 语法：
<p class="leading-(--my-line-height) ...">
Lorem ipsum dolor sit amet...
</p>这只是 leading-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体前缀，即可让 line-height 工具类仅在中等及以上屏幕尺寸下生效：
<p class="leading-5 md:leading-6 ...">
Lorem ipsum dolor sit amet...
</p>在变体文档中了解更多关于使用变体的信息。
自定义主题
leading-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义它：
@theme {
--spacing: 1px;
}在主题变量文档中了解更多关于自定义间距比例的信息。