Typography
用於控制元素行高的通用類別。
| Class | Styles |
|---|---|
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>每個字型大小通用類別在未提供行高時也會設定預設行高。您可以在 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.
<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>] 語法，根據完全自訂的值來設定 line height：
<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() 函式。
在 line-height 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<p class="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>在變體文件中了解更多關於使用變體的資訊。
leading-<number> 通用類別由 --spacing 主題變數驅動，可以在你自己的主題中自訂：
@theme { --spacing: 1px; }在主題變數文件中了解更多關於自訂間距比例的資訊。