Line height and leading in Tailwind - Browser Rendering Trace

Render Flow - Line height and leading

Read HTML text element

↓

Parse Tailwind classes

↓

Identify leading-* class

↓

Calculate line-height value

↓

Apply line-height to text

↓

Recalculate layout

↓

Paint text with new spacing

The browser reads the text element, parses Tailwind's leading class to get the line-height value, applies it to the text, recalculates layout spacing between lines, and then paints the updated text with adjusted vertical spacing.

Render Steps - 3 Steps

Code Added:<p class="leading-normal">This is a paragraph<br>with normal line height.</p>

Before

[Empty page]

→

After

[Paragraph box]
This is a paragraph
with normal line height.

Adding a paragraph with normal line height shows text lines spaced at 1.5 times the font size, making lines comfortably spaced.

🔧 Browser Action:Creates DOM node, applies line-height:1.5, triggers layout and paint

Code Sample

Two paragraphs with different line heights: one normal spacing and one loose spacing between lines.

Tailwind

<p class="leading-normal">This is a paragraph<br>with normal line height.</p>
<p class="leading-loose">This is a paragraph<br>with loose line height.</p>

Tailwind

.leading-normal { line-height: 1.5; }
.leading-loose { line-height: 2; }

Render Quiz - 3 Questions

After applying step 2, how does the spacing between lines in the second paragraph compare to the first?

A The second paragraph has more space between lines.

B The second paragraph has less space between lines.

C Both paragraphs have the same line spacing.

D The second paragraph lines overlap.

Common Confusions - 2 Topics

Why does increasing line-height sometimes make paragraphs taller than expected?

Because line-height adds vertical space between lines, increasing it makes the paragraph taller by spacing lines further apart (see render_steps 2).

💡 More line-height means more vertical space between lines, so paragraphs grow taller.

Why doesn't line-height affect single-line text?

Line-height controls spacing between lines, so if text is only one line, no extra space is visible (render_steps 1 and 2 show multi-line examples).

💡 Line-height changes vertical spacing only when there are multiple lines.

Property Reference

Property	Tailwind Class	Value Applied	Visual Effect	Common Use
line-height	leading-none	1	Lines tightly packed, no extra space	Compact text
line-height	leading-tight	1.25	Slightly tighter lines	Dense text blocks
line-height	leading-normal	1.5	Comfortable spacing between lines	Default readable text
line-height	leading-relaxed	1.625	More space between lines	Easy reading
line-height	leading-loose	2	Loose spacing, airy text	Headings or emphasis

Concept Snapshot

Line height controls vertical space between lines of text. Tailwind uses leading-* classes to set line-height. Common values: leading-normal (1.5), leading-loose (2). Higher line-height means more space and taller paragraphs. Line-height affects multi-line text spacing only.