Line Height

Use leading-{value} utilities to control the line height of text. Named values set a multiplier relative to the font size. Numeric values set an absolute line height using the spacing scale (requires a font size class like text-base to take effect). Tailwind v4 also supports a slash syntax text-<size>/<number> that sets font-size and line-height together.

---

Basic example

Use font size utilities like text-sm/6 and text-sm/8 to set the font size and line-height of an element at the same time:

Style('text-sm/6 ...', child: Text('So I started to walk into the water...'))
Style('text-sm/7 ...', child: Text('So I started to walk into the water...'))
Style('text-sm/8 ...', child: Text('So I started to walk into the water...'))

Setting independently

Use leading-<number> utilities like leading-6 and leading-7 to set the line height of an element independent of the font-size:

Style('leading-6', child: Text('So I started to walk into the water...'))
Style('leading-7', child: Text('So I started to walk into the water...'))
Style('leading-8', child: Text('So I started to walk into the water...'))

Removing the leading

Use the leading-none utility to set the line height of an element equal to its font size:

Style('text-2xl leading-none ...', child: Text('The quick brown fox...'))

Class reference

Named (relative multipliers)

Class	Line Height
leading-none	1.0
leading-tight	1.25
leading-snug	1.375
leading-normal	1.5
leading-relaxed	1.625
leading-loose	2.0

Numeric (absolute, using spacing scale)

Class	Line Height
leading-3	12px
leading-4	16px
leading-5	20px
leading-6	24px
leading-7	28px
leading-8	32px
leading-9	36px
leading-10	40px

Slash syntax (font-size + line-height combined)

Tailwind v4 packs both axes into a single class. The line-height portion uses the spacing scale: <number> × 4px.

Class	Font Size	Line Height
text-sm/6	14px	24px
text-sm/7	14px	28px
text-sm/8	14px	32px

The same pattern works with any font-size keyword (e.g. text-base/7, text-lg/8).