Min and max sizing constraints in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class sets a minimum width of 16rem?

Choose the Tailwind CSS class that correctly applies a minimum width of 16rem to an element.

A min-width-64

B max-w-64

C min-w-64

D w-min-64

💡 Hint

Tailwind uses min-w- prefix for minimum width utilities.

The class min-w-64 sets the minimum width to 16rem (64 * 0.25rem). The max-w-64 sets maximum width, w-min-64 and min-width-64 are invalid Tailwind classes.

❓ rendering

intermediate

What will be the width of this box on a large screen?

Given this HTML snippet with Tailwind classes:

<div class="w-40 min-w-64 max-w-96 bg-blue-300">Box</div>

What is the final width of the box in rem units on a large screen?

A 10rem

B 40rem

C 24rem

D 16rem

💡 Hint

Remember the order of constraints: width, then min-width, then max-width.

The class w-40 sets width to 10rem (40 * 0.25rem). But min-w-64 sets minimum width to 16rem, so the box cannot be smaller than 16rem. max-w-96 sets max width 24rem, which is larger than min-width. So final width is 16rem.

🧠 Conceptual

advanced

Why use max-width constraints in responsive design?

Which reason best explains why max-width constraints are important in responsive web design?

A To prevent elements from becoming too wide on large screens, improving readability and layout.

B To force elements to always fill the entire screen width regardless of device.

C To set a fixed width that never changes on any screen size.

D To disable shrinking of elements below a certain width.

💡 Hint

Think about how text and content look on very wide screens.

Max-width constraints limit how wide an element can grow, which helps keep content readable and visually balanced on large screens. Forcing full width or fixed widths can harm usability.

📝 Syntax

advanced

Which Tailwind class is invalid for setting max height?

Identify the invalid Tailwind CSS class for setting maximum height of an element.

A max-h-96

B max-height-96

C max-h-screen

D max-h-full

💡 Hint

Tailwind uses abbreviated prefixes for sizing utilities.

max-height-96 is invalid because Tailwind uses max-h- prefix, not max-height-. The other options are valid classes.

❓ accessibility

expert

How do min and max sizing constraints affect accessibility?

Which statement best describes how min-width and max-width constraints impact accessibility for users with different needs?

A Proper min and max widths ensure content is readable and prevents layout breakage on zoom or screen resize, aiding users with low vision.

B Min and max widths have no impact on accessibility because screen readers ignore visual styles.

C Using fixed widths without min or max constraints is best for accessibility to keep layout consistent.

D Max-width constraints reduce accessibility by limiting how much users can zoom in on content.

💡 Hint

Consider how resizing and zooming affect users with visual impairments.

Setting sensible min and max widths helps maintain readable layouts when users zoom or resize windows, which is crucial for users with low vision or cognitive disabilities. Fixed widths or ignoring constraints can cause content to overflow or become unreadable.

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