Min and max sizing constraints in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a minimum width of 16rem using Tailwind CSS.

Tailwind

<div class="[1] bg-blue-200 p-4">Content</div>

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

Amin-w-64

Bmin-w-16

Cmax-w-16

Dmax-w-64

Attempts:

3 left

💡 Hint

Common Mistakes

Using max-w instead of min-w

Using a smaller number like 16 which equals 4rem

The class min-w-64 sets the minimum width to 16rem (64 * 0.25rem).

2fill in blank

medium

Complete the code to set a maximum height of 12rem using Tailwind CSS.

Tailwind

<div class="h-24 [1] bg-green-200 p-4">Content</div>

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

Amax-h-48

Bmax-h-12

Dmax-h-32

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the spacing scale numbers

Using min-h instead of max-h

The class max-h-12 sets the maximum height to 3rem (12 * 0.25rem).

But since 12 is 3rem, to get 12rem max height, the correct class is max-h-48 (48 * 0.25rem = 12rem). So the correct answer is max-h-48.

3fill in blank

hard

Fix the error in the code to correctly set a minimum height of 8rem.

Tailwind

<section class="min-h-[1] bg-yellow-200 p-6">Content</section>

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

A8

B64

C32

D16

Attempts:

3 left

💡 Hint

Common Mistakes

Using the raw rem value instead of the scale number

Confusing min-h with max-h

The class min-h-32 sets the minimum height to 8rem (32 * 0.25rem).

4fill in blank

hard

Fill both blanks to set a minimum width of 10rem and a maximum width of 20rem.

Tailwind

<div class="[1] [2] bg-purple-200 p-5">Content</div>

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

Amin-w-40

Bmax-w-80

Cmin-w-20

Dmax-w-40

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up min and max classes

Using wrong scale numbers for rem values

min-w-40 sets min width to 10rem (40 * 0.25rem).

max-w-40 sets max width to 10rem, but we want 20rem max width which is max-w-80. So the correct max width is max-w-80.

Therefore, the correct answer is min-w-40 and max-w-80.

5fill in blank

hard

Fill all three blanks to create a div with min-width 8rem, max-width 24rem, and max-height 12rem.

Tailwind

<div class="[1] [2] [3] bg-red-200 p-3">Content</div>

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

Amin-w-32

Bmax-w-96

Cmax-h-48

Dmin-w-24

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing min and max prefixes

Using wrong scale numbers for rem values

min-w-32 sets min width to 8rem (32 * 0.25rem).

max-w-96 sets max width to 24rem (96 * 0.25rem).

max-h-48 sets max height to 12rem (48 * 0.25rem).