Line height and leading in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the line height to 1.5 using Tailwind CSS.

Tailwind

<p class="[1]">This is a paragraph with adjusted line height.</p>

Drag options to blanks, or click blank then click option'

Aleading-8

Bleading-4

Cleading-6

Dleading-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using leading-4 which is too small and makes lines cramped.

Using leading-8 which is too large and creates too much space.

The class leading-6 sets the line height to 1.5 in Tailwind CSS, which improves readability by spacing lines nicely.

2fill in blank

medium

Complete the code to apply a line height of 2 (double spacing) using Tailwind CSS.

Tailwind

<div class="[1]">Double spaced text for better readability.</div>

Drag options to blanks, or click blank then click option'

Aleading-8

Bleading-3

Cleading-7

Dleading-5

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing leading-5 which is smaller than double spacing.

Using leading-3 which is too tight.

The class leading-8 sets the line height to 2, which doubles the space between lines.

3fill in blank

hard

Fix the error in the code by choosing the correct Tailwind class for line height 1.25.

Tailwind

<span class="text-base [1]">Text with slightly increased line height.</span>

Drag options to blanks, or click blank then click option'

Aleading-5

Bleading-4

Cleading-3

Dleading-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using leading-4 which is too small.

Using leading-6 which is too large.

The class leading-5 sets the line height to 1.25, which is slightly more than normal spacing.

4fill in blank

hard

Fill both blanks to create a paragraph with font size large and line height 1.75 using Tailwind CSS.

Tailwind

<p class="text-[1] [2]">This paragraph has larger text and comfortable line spacing.</p>

Drag options to blanks, or click blank then click option'

Alg

Bxl

Cleading-7

Dleading-5

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-xl which is extra large font size, not requested.

Using leading-5 which is smaller line height.

The class text-lg sets a large font size, and leading-7 sets line height to 1.75 for good readability.

5fill in blank

hard

Fill all three blanks to create a heading with extra large font, line height 1, and bold weight using Tailwind CSS.

Tailwind

<h1 class="text-[1] [2] font-[3]">Important Heading</h1>

Drag options to blanks, or click blank then click option'

Axl

Bleading-none

Cbold

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using leading-7 which is too large line height.

Using font-light or missing font weight.

text-xl sets extra large font size, leading-none sets line height to 1 (no extra space), and font-bold makes the text bold.