Typography
用於控制元素字距的通用類別。
| Class | Styles |
|---|---|
tracking-tighter | letter-spacing: var(--tracking-tighter); /* -0.05em */ |
tracking-tight | letter-spacing: var(--tracking-tight); /* -0.025em */ |
tracking-normal | letter-spacing: var(--tracking-normal); /* 0em */ |
tracking-wide | letter-spacing: var(--tracking-wide); /* 0.025em */ |
tracking-wider | letter-spacing: var(--tracking-wider); /* 0.05em */ |
tracking-widest | letter-spacing: var(--tracking-widest); /* 0.1em */ |
tracking-(<custom-property>) | letter-spacing: var(<custom-property>); |
tracking-[<value>] | letter-spacing: <value>; |
使用 tracking-tight 和 tracking-wide 等通用類別來設定元素的字距：
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="tracking-tight ...">The quick brown fox ...</p><p class="tracking-normal ...">The quick brown fox ...</p><p class="tracking-wide ...">The quick brown fox ...</p>使用 Tailwind 內建的命名字距比例時，負值的用途不大，但如果您已將比例自訂為使用數字，則會很有用：
@theme { --tracking-1: 0em; --tracking-2: 0.025em; --tracking-3: 0.05em; --tracking-4: 0.1em;}要使用負的字距值，請在類別名稱前加上破折號將其轉換為負值：
<p class="-tracking-2">The quick brown fox ...</p>使用 tracking-[<value>] 語法，根據完全自訂的值來設定 letter spacing：
<p class="tracking-[.25em] ..."> Lorem ipsum dolor sit amet...</p>對於 CSS 變數，你也可以使用 tracking-(<custom-property>) 語法：
<p class="tracking-(--my-tracking) ..."> Lorem ipsum dolor sit amet...</p>這只是 tracking-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
在 letter-spacing 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<p class="tracking-tight md:tracking-wide ..."> Lorem ipsum dolor sit amet...</p>在變體文件中了解更多關於使用變體的資訊。
使用 --tracking-* 主題變數來自訂專案中的 letter spacing 通用類別：
@theme { --tracking-tightest: -0.075em; }現在可以在標記中使用 tracking-tightest 通用類別：
<p class="tracking-tightest"> Lorem ipsum dolor sit amet...</p>在主題文件中了解更多關於自訂主題的資訊。