排版
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，可以同時設定元素字體大小和行高
所以我開始走入水中。我不會對你們撒謊，我很害怕。但我堅持下去，當我越過浪花時，一種奇怪的平靜降臨在我身上。我不知道是神聖的干預還是所有生物的親緣關係，但我告訴你 Jerry，在那一刻，我就是一位海洋生物學家。
所以我開始走入水中。我不會對你們撒謊，我很害怕。但我堅持下去，當我越過浪花時，一種奇怪的平靜降臨在我身上。我不知道是神聖的干預還是所有生物的親緣關係，但我告訴你 Jerry，在那一刻，我就是一位海洋生物學家。
所以我開始走入水中。我不會對你們撒謊，我很害怕。但我堅持下去，當我越過浪花時，一種奇怪的平靜降臨在我身上。我不知道是神聖的干預還是所有生物的親緣關係，但我告訴你 Jerry，在那一刻，我就是一位海洋生物學家。
<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，可以獨立於字體大小設定元素的行高
所以我開始走入水中。我不會對你們撒謊，我很害怕。但我堅持下去，當我越過浪花時，一種奇怪的平靜降臨在我身上。我不知道是神聖的干預還是所有生物的親緣關係，但我告訴你 Jerry，在那一刻，我就是一位海洋生物學家。
所以我開始走入水中。我不會對你們撒謊，我很害怕。但我堅持下去，當我越過浪花時，一種奇怪的平靜降臨在我身上。我不知道是神聖的干預還是所有生物的親緣關係，但我告訴你 Jerry，在那一刻，我就是一位海洋生物學家。
所以我開始走入水中。我不會對你們撒謊，我很害怕。但我堅持下去，當我越過浪花時，一種奇怪的平靜降臨在我身上。我不知道是神聖的干預還是所有生物的親緣關係，但我告訴你 Jerry，在那一刻，我就是一位海洋生物學家。
<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-[<數值>] 語法 設定行高基於完全自訂的數值
<p class="leading-[1.5] ..."> <!-- ... --></p>對於 CSS 變數，您也可以使用 leading-(<自訂屬性>) 語法
<p class="leading-(--my-line-height) ..."> <!-- ... --></p>這只是 leading-[var(<自訂屬性>)] 的簡寫，它會自動為您新增 var() 函式。
響應式設計
前綴一個 line-height 工具類 加上一個斷點變體，例如 md:，以僅在中等 螢幕尺寸及以上套用該工具類。
<p class="leading-5 md:leading-6 ..."> <!-- ... --></p>在變體文件中了解更多關於使用變體的資訊。
自訂您的主題
line-height leading-<數字> 工具類由 --spacing 主題變數驅動，您可以在自己的主題中自訂它
@theme { --spacing: 1px; }在主題變數文件中了解更多關於自訂間距比例的資訊。
