Height utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the height of the div to 16 (4rem) using Tailwind CSS.

Tailwind

<div class="h-[1] bg-blue-500"></div>

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

A16

B4

C64

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using h-4 instead of h-16 for 4rem height.

Confusing width classes with height classes.

The class h-16 sets the height to 4rem (16 * 0.25rem) in Tailwind CSS.

2fill in blank

medium

Complete the code to make the div take full viewport height using Tailwind CSS.

Tailwind

<section class="[1] bg-green-300"></section>

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

Ah-full

Bh-auto

Ch-screen

Dh-min

Attempts:

3 left

💡 Hint

Common Mistakes

Using h-full which means 100% of parent height, not viewport.

Using h-auto which lets height adjust to content.

The class h-screen sets the element's height to 100% of the viewport height.

3fill in blank

hard

Fix the error in the code to set the div height to 12 (3rem) using Tailwind CSS.

Tailwind

<div class="h-[1] bg-red-400"></div>

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

A3

B30

C1.5

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using h-3 thinking it means 3rem instead of 0.75rem.

Using decimal numbers which Tailwind does not support in class names.

The class h-12 sets height to 3rem (12 * 0.25rem). Using h-3 sets height to 0.75rem, which is too small.

4fill in blank

hard

Fill both blanks to set the div height to 24 (6rem) and make it responsive with full height on small screens.

Tailwind

<div class="[1] sm:[2] bg-yellow-300"></div>

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

Ah-full

Bh-24

Ch-screen

Dh-16

Attempts:

3 left

💡 Hint

Common Mistakes

Using h-24 without responsive prefix for small screens.

Using h-screen which sets viewport height, not container height.

The class h-full makes the div take full height of its container on small screens. The class sm:h-24 sets height to 6rem on screens medium and larger.

5fill in blank

hard

Fill all three blanks to create a div with height 32 (8rem), minimum height full viewport, and maximum height 96 (24rem).

Tailwind

<div class="[1] min-h-[2] max-h-[3] bg-purple-400"></div>

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

Ah-32

Bscreen

Ch-96

Dh-full

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the h- prefix on max height.

Using min-h-full instead of min-h-screen for viewport height.

h-32 sets height to 8rem. min-h-screen sets minimum height to full viewport height. max-h-96 sets maximum height to 24rem.