letter-spacing

Utilities for controlling the tracking, or letter spacing, of an element.

Examples

Basic example

Use utilities like tracking-tight and tracking-wide to set the letter spacing of an element:

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>

Using a custom value

Responsive design

Customizing your theme