Line height and leading in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's line-height utility

Which Tailwind class sets the line height to 1.5 times the font size?

A leading-4

B leading-6

C leading-8

D leading-3

💡 Hint

Tailwind's default font size is 1rem and leading-6 sets line height to 1.5rem, which equals 1.5 times the font size.

The leading-6 class in Tailwind sets the line height to 1.5rem, which is 1.5 times the default font size of 1rem.

📝 Syntax

intermediate

Correct Tailwind class for tight line height

Which Tailwind class applies a line height of 1.25 (tight leading)?

A leading-normal

B leading-snug

C leading-relaxed

D leading-tight

💡 Hint

The class name suggests a 'tight' line height.

leading-tight sets the line height to 1.25, which is tighter than normal.

❓ rendering

advanced

Visual difference of line height classes

Given the HTML below, which option shows the correct visual difference between leading-relaxed and leading-snug?

Tailwind

<p class="leading-relaxed">This text has relaxed line height.</p>
<p class="leading-snug">This text has snug line height.</p>

A The first paragraph lines are spaced more apart than the second paragraph.

B Both paragraphs have the same line spacing.

C The second paragraph lines are spaced more apart than the first paragraph.

D Both paragraphs have very tight line spacing.

💡 Hint

Relaxed means more space, snug means less space.

leading-relaxed increases line height to about 1.625, making lines more spaced out. leading-snug sets line height to about 1.375, which is tighter.

❓ selector

advanced

Choosing the right Tailwind class for accessibility

Which Tailwind line height class is best for improving readability for users with visual impairments?

A leading-relaxed

B leading-tight

C leading-3

D leading-none

💡 Hint

More line spacing helps readability.

leading-relaxed increases line height, making text easier to read for many users, especially those with visual impairments.

🧠 Conceptual

expert

Effect of custom line height with arbitrary values

What will be the computed line height if you use the Tailwind class leading-[2.2] on a paragraph with font size 1rem?

A 2.2 pixels line height regardless of font size

B Default line height of 1.5rem ignoring the custom value

C 2.2 times the font size, so 2.2rem line height

D Syntax error, arbitrary values not allowed in line height

💡 Hint

Arbitrary values in Tailwind allow precise control.

The class leading-[2.2] sets the line height to exactly 2.2 times the font size, so with 1rem font size, line height is 2.2rem.