MapCSS

Typography

Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element.

Basic usage

Setting the letter spacing

Control the letter spacing of an element using the tracking-{size} utilities.

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 className="**tracking-tight** ...">The quick brown fox ...</p>
<p className="**tracking-normal** ...">The quick brown fox ...</p>
<p className="**tracking-wide** ...">The quick brown fox ...</p>

Using negative values

To use a negative letter-spacing value, prefix the className name with a dash to convert it to a negative value.

Using negative values doesn't make a ton of sense with the letter-spacing scale Tailwind includes out of the box, but if you've opted to customize your letter-spacing scale to use numbers instead of descriptive words like "wide" the negative value modifier can be useful.