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).

Practice

1. What does the Tailwind class min-w-20 do to an element?

easy

A. Sets the maximum width of the element to 20rem

B. Sets the minimum width of the element to 5rem

C. Sets the minimum height of the element to 20rem

D. Sets the maximum height of the element to 5rem

Solution

1. Step 1: Understand the class prefix

   The prefix min-w- means minimum width in Tailwind CSS.

2. Step 2: Interpret the value

   The number 20 corresponds to 5rem in Tailwind's spacing scale.

3. Final Answer:

   Sets the minimum width of the element to 5rem -> Option B

4. Quick Check:

   min-w-20 means min-width: 5rem [OK]

Hint: min-w sets minimum width; number maps to rem size [OK]

Common Mistakes:

• Confusing min-w with max-w
• Mixing width and height classes
• Assuming number is pixels, not rem

2. Which Tailwind class correctly sets a maximum height of 10rem?

easy

A. max-h-40

B. max-w-10

C. min-h-10

D. min-w-40

Solution

1. Step 1: Identify max height prefix

   The prefix max-h- sets maximum height in Tailwind.

2. Step 2: Match the value to rem

   Value 40 corresponds to 10rem in Tailwind spacing scale.

3. Final Answer:

   max-h-40 -> Option A

4. Quick Check:

   max-h-40 means max-height: 10rem [OK]

Hint: max-h sets max height; 40 equals 10rem [OK]

Common Mistakes:

• Using max-w instead of max-h
• Using min-h or min-w instead of max-h
• Confusing 10 with 40 in spacing scale

3. Given this HTML snippet:

<div class="min-w-24 max-w-48 bg-blue-200">Content</div>

What is the minimum and maximum width of the div in rem?

medium

A. Minimum 12rem, Maximum 24rem

B. Minimum 24rem, Maximum 48rem

C. Minimum 6rem, Maximum 12rem

D. Minimum 48rem, Maximum 96rem

Solution

1. Step 1: Convert min-w-24 to rem

   In Tailwind, 24 equals 6rem (24 * 0.25rem).

2. Step 2: Convert max-w-48 to rem

   48 equals 12rem (48 * 0.25rem).

3. Final Answer:

   Minimum 6rem, Maximum 12rem -> Option C

4. Quick Check:

   min-w-24 = 6rem, max-w-48 = 12rem [OK]

Hint: Multiply spacing number by 0.25rem for size [OK]

Common Mistakes:

• Assuming numbers are pixels
• Mixing min and max values
• Forgetting Tailwind spacing scale factor

4. You want to limit a box's height between 4rem and 8rem using Tailwind. Which class combination is incorrect?

medium

A. min-h-16 max-h-8

B. min-h-16 max-h-32

C. min-h-4 max-h-8

D. min-h-8 max-h-16

Solution

1. Step 1: Understand Tailwind spacing scale

   16 equals 4rem and 32 equals 8rem (16*0.25=4rem, 32*0.25=8rem).

2. Step 2: Check each option's min and max values

   min-h-16 max-h-8 sets min-h-16 (4rem) but max-h-8 (2rem), which is smaller than min height, causing conflict.

3. Final Answer:

   min-h-16 max-h-8 -> Option A

4. Quick Check:

   Max height smaller than min height is invalid [OK]

Hint: Max size must be equal or larger than min size [OK]

Common Mistakes:

• Setting max smaller than min
• Confusing spacing numbers with rem
• Using wrong prefixes (w vs h)

5. You want a responsive card that never gets narrower than 12rem but no wider than 24rem. Which Tailwind classes achieve this and also ensure the card height is at least 8rem but no more than 16rem?

hard

A. min-w-48 max-w-96 min-h-32 max-h-32

B. min-w-12 max-w-24 min-h-8 max-h-16

C. min-w-48 max-w-96 min-h-16 max-h-32

D. min-w-48 max-w-96 min-h-32 max-h-64

Solution

1. Step 1: Convert rem to Tailwind spacing numbers

   12rem ÷ 0.25rem = 48, 24rem ÷ 0.25rem = 96, 8rem ÷ 0.25rem = 32, 16rem ÷ 0.25rem = 64.

2. Step 2: Match classes to these values

   min-w-48 and max-w-96 set width limits; min-h-32 and max-h-64 set height limits correctly.

3. Final Answer:

   min-w-48 max-w-96 min-h-32 max-h-64 -> Option D

4. Quick Check:

   Spacing numbers match rem sizes for min/max width and height [OK]

Hint: Divide rem by 0.25 to get Tailwind spacing number [OK]

Common Mistakes:

• Using rem values directly as class numbers
• Mixing width and height classes
• Choosing wrong spacing scale numbers