Line height
Utilities for controlling the leading (line height) of an element
Class reference
Relative line-heights
Use the leading-none
, leading-tight
, leading-snug
, leading-normal
, leading-relaxed
, and leading-loose
utilities to give an element a relative line-height based on its current font-size.
Fixed line-heights
Use the leading-{size}
utilities 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.
Responsive
To control the line height of an element at a specific breakpoint, add a {screen}:
prefix to any existing line height utility. For example, use md:leading-loose
to apply the leading-loose
utility at only medium screen sizes and above.
<p class="leading-none **md:leading-loose** ...">Lorem ipsum dolor sit amet ...</p>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5