Tailwind CSS Course
Tailwind CSS
/
Beginner

Line Height

Definition

Utilities for controlling the leading (line height) of an element.

Explain Like I'm New

The vertical breathing room between sentences in a paragraph. Tailwind calls this `leading`. `leading-none` squashes lines together. `leading-loose` spreads them far apart.

Real World Example

Blowing up a header to `text-6xl` often creates an ugly, massive gap between lines. Applying `leading-tight` pulls the header lines beautifully close together.

Common Use Cases

  • •Readability optimization
  • •Heading adjustments

Interactive Example

 Interview Questions
basic
  • What prefix does Tailwind use for line-height classes?
intermediate
  • Why do large headers usually require `leading-tight` or `leading-none`?
Flash Cards
Question
Prefix?
Click to reveal answer
Answer
`leading-` (e.g., `leading-loose`). This is an old typography term referring to the strips of lead they used to put between lines of metal type.
Question
Why headers need tight leading?
Click to reveal answer
Answer
Line height scales proportionally with font size. If you have a massive font, the default line height creates an awkwardly huge gap of whitespace between the lines. Tightening it looks much more professional.