Line height and leading in Tailwind - Performance & Optimization

Performance: Line height and leading

LOW IMPACT

Line height affects text readability and vertical spacing, impacting paint and layout performance when changed frequently.

Adjusting text vertical spacing for readability

Tailwind

<p class="leading-relaxed">Text with standard Tailwind leading</p>

Using predefined Tailwind line-height classes ensures consistent spacing and avoids unexpected layout shifts.

📈 Performance Gainsingle reflow on load, stable layout reduces CLS

Adjusting text vertical spacing for readability

Tailwind

<p class="leading-[2.5rem]">Text with custom large line height</p>

Using arbitrary large line heights inline causes layout recalculations and potential layout shifts on resize.

📉 Performance Costtriggers 1 reflow per text block, increases CLS risk

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Arbitrary inline line-height	Minimal	1 per text block	Moderate	[X] Bad
Tailwind predefined leading classes	Minimal	1 on initial load	Low	[OK] Good

Rendering Pipeline

Line height changes affect the Layout and Paint stages by changing text block height and spacing, which can cause reflows and repaints.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout

Core Web Vital Affected

CLS

Line height affects text readability and vertical spacing, impacting paint and layout performance when changed frequently.

Optimization Tips

1Use Tailwind's predefined leading classes for consistent line height.

2Avoid arbitrary inline line-height values to prevent layout shifts.

3Consistent line height reduces reflows and improves CLS.

Performance Quiz - 3 Questions

Which line-height usage helps reduce layout shifts and improve CLS?

A Using consistent Tailwind leading classes

B Using arbitrary inline large line-height values

C Changing line-height dynamically on every frame

D Not setting line-height at all

DevTools: Performance

How to check: Record a performance profile while resizing or loading the page, then look for Layout and Recalculate Style events related to text elements.

What to look for: Frequent Layout events or long Layout durations indicate costly line-height changes causing reflows.