字体排印
用于控制元素行高(leading 或 line height)的实用工具。
类名 | 样式 |
---|---|
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.
<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>
每个字体大小实用工具在未提供行高时也会设置默认行高。您可以在 字体大小文档 中了解有关这些值以及如何自定义它们的更多信息。
使用 leading-<number>
实用工具(如 leading-6
和 leading-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.
<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.
<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()
函数。
前缀a line-height
实用工具 带有断点变体,如 md:
,仅在medium 屏幕尺寸及以上尺寸应用该实用工具
<p class="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>
在 变体文档 中了解有关使用变体的更多信息。
The leading-<number>
实用工具由 --spacing
主题变量驱动,该变量可以在您自己的主题中自定义
@theme { --spacing: 1px; }
在 主题变量文档 中了解有关自定义间距刻度的更多信息。