Line Height
Utilities for controlling the leading (line height) of an element.
| Class | Properties |
|---|---|
| leading-3 | line-height: .75rem; |
| leading-4 | line-height: 1rem; |
| leading-5 | line-height: 1.25rem; |
| leading-6 | line-height: 1.5rem; |
| leading-7 | line-height: 1.75rem; |
| leading-8 | line-height: 2rem; |
| leading-9 | line-height: 2.25rem; |
| leading-10 | line-height: 2.5rem; |
| leading-reset | line-height: 1; |
| leading-none | line-height: 1; |
| leading-3xs | line-height: 1.2; |
| leading-tight | line-height: 1.25; |
| leading-2xs | line-height: 1.3; |
| leading-sm | line-height: 1.35; |
| leading-snug | line-height: 1.375; |
| leading-md | line-height: 1.4; |
| leading-lg | line-height: 1.5; |
| leading-normal | line-height: 1.5; |
| leading-xl | line-height: 1.62; |
| leading-relaxed | line-height: 1.625; |
| leading-2xl | line-height: 1.75; |
| leading-3xl | line-height: 2; |
| leading-loose | line-height: 2; |
Relative line-heights
Use the leading-reset, leading-none, leading-3xs, leading-tight, leading-2xs, leading-sm, leading-snug, leading-md, leading-lg, leading-normal, leading-xl, leading-relaxed, leading-2xl, leading-3xl and leading-loose utilities to give an element a relative line-height based on its current font-size.
html
<p class="leading-none ...">So I started to walk into the water...</p>
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-3xl ...">So I started to walk into the water...</p>Fixed line-heights
Use utilities like leading-3 and leading-10 to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element’s final size.
html
<p class="leading-3 ...">So I started to walk into the water...</p>
<p class="leading-4 ...">So I started to walk into the water...</p>
<p class="leading-6 ...">So I started to walk into the water...</p>
<p class="leading-7 ...">So I started to walk into the water...</p>
<p class="leading-8 ...">So I started to walk into the water...</p>