Utilities for controlling the leading, or line height, of an element.
2025-04-08
Written by: tdtc
| Class | Styles |
|---|---|
| leading-none | line-height: 1; |
leading-<number> | line-height: calc(var(--spacing) * <number>); |
leading-(<custom-property>) | line-height: var(<custom-property>); |
leading-[<value>] | line-height: <value>; |
Use font size utilities like text-sm/6 and text-lg/7 to
set the font size and line-height of an element at the same time:
<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/8 ...">So I started to walk into the water...</p>
Setting independently
Use leading- utilities like leading-6 and leading-7 to
set the line height of an element independent of the font-size:
<p class="text-sm leading-6">So I started to walk into the water...</p>
<p class="text-sm leading-7">So I started to walk into the water...</p>
<p class="text-sm leading-8">So I started to walk into the water...</p>
Using a custom value
Use the leading-[] syntax to set the line height based on a completely custom value:
<p class="leading-[1.5] ...">
Lorem ipsum dolor sit amet...
</p>
Ref