letter-spacing
En esta página
| Clase | Propiedades CSS |
|---|---|
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>; |
Examples#
Basic example#
Use utilities like tracking-tight and tracking-wide to set the letter spacing of an element:
{
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.
<!-- [!code classes:tracking-tight,tracking-normal,tracking-wide] -->
<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>
Using negative values#
Using negative values doesn't make a ton of sense with the named letter spacing scale Tailwind includes out of the box, but if you've customized your scale to use numbers it can be useful:
@theme {
--tracking-1: 0em;
--tracking-2: 0.025em;
--tracking-3: 0.05em;
--tracking-4: 0.1em;
}
To use a negative letter spacing value, prefix the class name with a dash to convert it to a negative value:
<!-- [!code classes:-tracking-2] -->
<p class="-tracking-2">The quick brown fox ...</p>