| Class | Properties |
|---|---|
.tracking-tighter | letter-spacing: -.05em; |
.tracking-tight | letter-spacing: -.025em; |
.tracking-normal | letter-spacing: 0; |
.tracking-wide | letter-spacing: .025em; |
.tracking-wider | letter-spacing: .05em; |
Usage
Control the letter spacing of an element using the .tracking-{size} utilities.
<p class="tracking-tighter ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-tight ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-normal ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-wide ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-wider ...">The quick brown fox jumped over the lazy dog.</p>Variants
By default, only responsive variants are generated for letter spacing utilities.
Responsive
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.
Hover-state
To include hover-state variants like .hover:tracking-wide, add "letter-spacing" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"letter-spacing",
);