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.12.3