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.

Practice

1. What does the Tailwind class leading-relaxed control in a text block?

easy

A. The margin around the text block

B. The font size of the text

C. The color of the text

D. The space between lines of text

Solution

1. Step 1: Understand the purpose of leading- classes

   In Tailwind, leading- classes set the line height, which is the vertical space between lines of text.

2. Step 2: Identify what leading-relaxed does

   leading-relaxed increases the line height to make text more spaced out and easier to read.

3. Final Answer:

   The space between lines of text -> Option D

4. Quick Check:

   Line height = space between lines [OK]

Hint: Remember: leading = line height, controls vertical spacing [OK]

Common Mistakes:

• Confusing line height with font size
• Thinking it changes text color
• Mixing it up with margin or padding

2. Which of the following is the correct Tailwind class to set line height to 1.25 (20px if base font is 16px)?

easy

A. leading-5

B. leading-6

C. leading-4

D. leading-7

Solution

1. Step 1: Recall Tailwind's default line height scale

   Tailwind's leading-5 corresponds to 1.25 line height, which is 20px if the font size is 16px.

2. Step 2: Match the class to the correct value

   leading-6 is 1.5, leading-4 is 1, and leading-7 is 1.75, so only leading-5 matches 1.25.

3. Final Answer:

   leading-5 -> Option A

4. Quick Check:

   leading-5 = 1.25 line height [OK]

Hint: leading-5 means 1.25 line height by Tailwind default [OK]

Common Mistakes:

• Choosing leading-6 thinking it's 1.25
• Confusing leading-4 as 1.25
• Not knowing Tailwind's default scale

3. What will be the visual effect of this HTML snippet?

<p class="leading-tight">This is a line of text.</p>
<p class="leading-loose">This is another line of text.</p>

medium

A. The second paragraph has less space between lines than the first

B. Both paragraphs have the same line spacing

C. The first paragraph has less space between lines than the second

D. Both paragraphs have no space between lines

Solution

1. Step 1: Understand leading-tight and leading-loose

   leading-tight sets a smaller line height (less space), while leading-loose sets a larger line height (more space).

2. Step 2: Compare the two paragraphs visually

   The first paragraph will have lines closer together, the second paragraph will have lines spaced further apart.

3. Final Answer:

   The first paragraph has less space between lines than the second -> Option C

4. Quick Check:

   leading-tight < leading-loose [OK]

Hint: Tight means less space, loose means more space between lines [OK]

Common Mistakes:

• Assuming tight means more space
• Thinking both classes are equal
• Ignoring the effect of line height

4. You wrote this code but the line height does not change as expected:

<p class="leading-10">Sample text</p>

What is the most likely reason?

medium

A. You forgot to include Tailwind CSS in your project

B. The font size is too small to notice line height changes

C. The class leading-10 does not exist in Tailwind by default

D. Line height only works on headings, not paragraphs

Solution

1. Step 1: Verify the class is valid

   leading-10 is a valid Tailwind class setting line-height to 2.5rem.

2. Step 2: Identify the most likely cause

   The most common reason utility classes have no effect is forgetting to include the Tailwind CSS file in the project.

3. Final Answer:

   You forgot to include Tailwind CSS in your project -> Option A

4. Quick Check:

   No Tailwind CSS = no utility class effects [OK]

Hint: Ensure Tailwind CSS is linked before debugging class issues [OK]

Common Mistakes:

• Thinking leading-10 does not exist
• Blaming small font size instead of missing CSS
• Believing line height only affects headings

5. You want to create a responsive paragraph where line height is normal on small screens but relaxed on medium and larger screens. Which Tailwind class combination achieves this?

hard

A. leading-relaxed md:leading-normal

B. leading-normal md:leading-relaxed

C. md:leading-normal leading-relaxed

D. leading-tight md:leading-loose

Solution

1. Step 1: Understand responsive prefixes in Tailwind

   Classes prefixed with md: apply at medium screen sizes and above.

2. Step 2: Match the requirement to classes

   We want normal line height by default (small screens) and relaxed line height on medium+ screens, so leading-normal md:leading-relaxed fits.

3. Final Answer:

   leading-normal md:leading-relaxed -> Option B

4. Quick Check:

   Default normal, medium+ relaxed = leading-normal md:leading-relaxed [OK]

Hint: Use responsive prefix md: for medium+ screen styles [OK]

Common Mistakes:

• Reversing the order of classes
• Not using responsive prefixes correctly
• Using classes that don't exist