Tailwind CSS Course
Tailwind CSS
/
Beginner

Letter Spacing

Definition

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

Explain Like I'm New

The horizontal breathing room between individual letters. Tailwind calls this `tracking`. `tracking-tighter` squashes letters. `tracking-widest` spreads them apart.

Real World Example

Creating a premium, cinematic sub-header by using tiny text, all caps, and massive letter spacing: `text-xs uppercase tracking-widest`.

Common Use Cases

  • •Cinematic titles
  • •ALL CAPS text legibility

Interactive Example

 Interview Questions
basic
  • What prefix does Tailwind use for letter-spacing classes?
intermediate
  • Why is it a standard design rule to add `tracking-wide` when using `uppercase` text?
Flash Cards
Question
Prefix?
Click to reveal answer
Answer
`tracking-` (e.g., `tracking-wide`).
Question
Why uppercase needs tracking?
Click to reveal answer
Answer
Uppercase letters are blocky and don't have natural 'ascenders' or 'descenders' to create visual rhythm. If they are placed too close together, they form a solid, unreadable rectangle. Spacing them out improves legibility immensely.