排版
letter-spacing (字母間距)
用於控制元素字母間距的工具類別。
| 類別 | 樣式 |
|---|---|
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 的工具類別來設定元素的字母間距
tracking-tight
The quick brown fox jumps over the lazy dog.
tracking-normal
The quick brown fox jumps over the lazy dog.
tracking-wide
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>] 語法 來設定字母間距基於完全自訂的值
<p class="tracking-[.25em] ..."> <!-- ... --></p>對於 CSS 變數，您也可以使用 tracking-(<custom-property>) 語法
<p class="tracking-(--my-tracking) ..."> <!-- ... --></p>這只是 tracking-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函式。
響應式設計
前綴一個 letter-spacing 工具類別 使用像是 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上
<p class="tracking-tight md:tracking-wide ..."> <!-- ... --></p>深入了解如何在變體文件中使用變體。
自訂你的主題
使用 --tracking-* 主題變數來客製化專案中的字母間距 工具類別
@theme { --tracking-tightest: -0.075em; }現在 tracking-最緊密的 工具類別可以在你的標記中使用
<p class="tracking-tightest"> <!-- ... --></p>深入了解如何在 主題文件中自訂你的主題.
