Utilities for controlling the tracking (letter spacing) of an element.
.tracking-tighter
The quick brown fox jumps over the lazy dog.
.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.
.tracking-wider
The quick brown fox jumps over the lazy dog.
.tracking-widest
The quick brown fox jumps over the lazy dog.
<p class="tracking-tighter ...">The quick brown fox ...</p>
<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>
<p class="tracking-wider ...">The quick brown fox ...</p>
<p class="tracking-widest ...">The quick brown fox ...</p>
To control the letter spacing of an element at a specific breakpoint, add a {screen}:
prefix to any existing letter spacing utility. For example, use md:tracking-wide
to apply the tracking-wide
utility at only medium screen sizes and above.
<p class="tracking-tight md:tracking-wide ...">The quick brown fox jumps over the lazy dog.</p>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
By default, Tailwind provides six tracking utilities. You can change, add, or remove these by editing the theme.letterSpacing
section of your Tailwind config.
// tailwind.config.js
module.exports = {
theme: {
letterSpacing: {
+ tightest: '-.075em',
tighter: '-.05em',
- tight: '-.025em',
normal: '0',
- wide: '.025em',
wider: '.05em',
- widest: '.1em',
+ widest: '.25em',
}
}
}
默認情況下, 只有 響應式 的 tracking 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 letterSpacing
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ letterSpacing: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 tracking 功能,可以在你的設定檔裡的 corePlugins
屬性中將 letterSpacing
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ letterSpacing: false,
}
}