Max-width responsive variants in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the correct Tailwind max-width responsive variant

Which Tailwind CSS class applies a max-width of 24rem only on screens larger than 1024px (large breakpoint)?

A max-w-96 md:max-w-96

B max-w-96 sm:max-w-96

C max-w-96 xl:max-w-96

D max-w-96 lg:max-w-96

💡 Hint

Remember, the lg prefix targets screens larger than 1024px.

The lg: prefix in Tailwind applies styles starting at the large breakpoint (1024px and above). So lg:max-w-96 sets max-width to 24rem only on large screens and bigger.

❓ rendering

intermediate

What is the visual effect of this Tailwind max-width code?

Given this HTML snippet:

<div class="max-w-xs md:max-w-lg">Content</div>

What happens to the max-width of the div when the screen width changes from 600px to 900px?

Tailwind

<div class="max-w-xs md:max-w-lg">Content</div>

A Max-width changes from 20rem to 32rem at 768px screen width

B Max-width changes from 24rem to 40rem at 768px screen width

C Max-width changes from 32rem to 20rem at 768px screen width

D Max-width stays 20rem regardless of screen size

💡 Hint

Check the Tailwind default breakpoints and max-width values.

max-w-xs sets max-width to 20rem by default. The md: prefix applies styles at 768px and above, so md:max-w-lg changes max-width to 32rem starting at 768px.

🧠 Conceptual

advanced

Understanding Tailwind max-width responsive variants priority

If you use these classes on a div:
max-w-sm md:max-w-md lg:max-w-lg
What is the max-width of the div on a screen width of 900px?

A max-w-lg (32rem)

B max-w-sm (24rem)

C max-w-md (28rem)

D No max-width applied

💡 Hint

Check which breakpoint applies at 900px and which classes override others.

At 900px, the md: breakpoint (768px) applies but lg: (1024px) does not. So md:max-w-md sets max-width to 28rem, overriding max-w-sm.

📝 Syntax

advanced

Which Tailwind class syntax is invalid for max-width responsive variants?

Which of these Tailwind classes will cause a syntax error or not work as expected?

A max-w-sm lg:maxw-md

B max-w-lg md:max-w-sm

C max-w-xl 2xl:max-w-2xl

D max-w-md xl:max-w-lg

💡 Hint

Look carefully at the colon and dash usage in the responsive prefix.

Option A uses lg:maxw-md which is missing the dash after max. The correct syntax is lg:max-w-md. This will not apply the style correctly.

❓ accessibility

expert

Ensuring accessibility with max-width responsive variants

When using Tailwind max-width responsive variants to control content width, which practice best supports accessibility and readability?

A Set max-width to a fixed large value on all screen sizes to avoid text wrapping

B Use responsive max-width variants to limit line length for better readability on large screens

C Avoid max-width classes and let content stretch full width always

D Use very small max-width on mobile to force horizontal scrolling

💡 Hint

Think about how line length affects reading comfort on different devices.

Using responsive max-width variants to limit line length on larger screens improves readability and accessibility. Too wide lines are hard to read, and responsive control helps adapt layout to device size.

Practice

1. What does the Tailwind class md:max-w-lg do?

easy

A. Sets the max-width to large only on medium screens and larger

B. Sets the max-width to large on all screen sizes

C. Sets the max-width to medium on large screens only

D. Sets the max-width to large only on small screens

Solution

1. Step 1: Understand the prefix md:

   The prefix md: means the style applies from medium screen sizes and up.

2. Step 2: Interpret max-w-lg

   The class max-w-lg sets the maximum width to a large size.

3. Final Answer:

   Sets the max-width to large only on medium screens and larger -> Option A

4. Quick Check:

   Prefix md: + max-w-lg = Sets the max-width to large only on medium screens and larger [OK]

Hint: Remember prefixes apply styles from that screen size up [OK]

Common Mistakes:

• Thinking the class applies on all screen sizes
• Confusing md: with lg:
• Assuming it applies only on small screens

2. Which of these is the correct Tailwind syntax to set max-width to medium on large screens only?

easy

A. lg:max-w-md

B. max-w-lg

C. md:max-w-md

D. sm:max-w-lg

Solution

1. Step 1: Identify the breakpoint for large screens

   The prefix for large screens is lg:.

2. Step 2: Match max-width size to medium

   The class for medium max-width is max-w-md.

3. Final Answer:

   lg:max-w-md -> Option A

4. Quick Check:

   Large screen prefix + medium max-width = lg:max-w-md [OK]

Hint: Use lg: for large screens, then max-width size [OK]

Common Mistakes:

• Using md: instead of lg:
• Omitting the prefix and applying to all screens
• Mixing max-width sizes with wrong prefixes

3. Given this HTML snippet:

<div class="max-w-sm md:max-w-lg lg:max-w-xl">Content</div>

What max-width applies when the screen width is 1024px (large breakpoint)?

medium

A. max-w-sm

B. max-w-xl

C. max-w-lg

D. No max-width applied

Solution

1. Step 1: Identify the screen size breakpoint

   1024px corresponds to the large (lg) breakpoint in Tailwind.

2. Step 2: Determine which max-width applies at large breakpoint

   At large screens, lg:max-w-xl overrides smaller breakpoints.

3. Final Answer:

   max-w-xl -> Option B

4. Quick Check:

   At 1024px, lg: classes apply = max-w-xl [OK]

Hint: At larger breakpoints, the largest prefix class applies [OK]

Common Mistakes:

• Choosing the smallest max-width instead of largest
• Ignoring the breakpoint order
• Thinking multiple max-widths apply simultaneously

4. What is wrong with this Tailwind class usage?

<div class="max-w-md sm:max-w-lg md:max-w-sm">Box</div>

medium

A. The sm: prefix is not supported for max-width

B. The syntax is invalid because of multiple max-width classes

C. The max-width decreases on larger screens, which is unusual

D. The classes will not apply because of missing lg: prefix

Solution

1. Step 1: Analyze the max-width values at breakpoints

   At small screens, max-width is large (sm:max-w-lg), but at medium screens it drops to small (md:max-w-sm).

2. Step 2: Understand typical responsive behavior

   Usually, max-width increases or stays the same on larger screens, not decreases.

3. Final Answer:

   The max-width decreases on larger screens, which is unusual -> Option C

4. Quick Check:

   Responsive max-width should not shrink on bigger screens [OK]

Hint: Max-width usually grows or stays same on bigger screens [OK]

Common Mistakes:

• Thinking multiple max-width classes cause syntax errors
• Believing sm: is invalid for max-width
• Expecting missing lg: to cause errors

5. You want a container that is max-width small on mobile, medium on tablets, and extra-large on desktops. Which Tailwind class combination achieves this?

hard

A. max-w-sm sm:max-w-md md:max-w-lg

B. max-w-md sm:max-w-lg lg:max-w-xl

C. sm:max-w-sm md:max-w-md xl:max-w-xl

D. max-w-sm md:max-w-md lg:max-w-xl

Solution

1. Step 1: Assign max-width for mobile (default)

   Use max-w-sm for small max-width on mobile (no prefix).

2. Step 2: Assign max-width for tablets (medium screens)

   Use md:max-w-md to set medium max-width starting at medium breakpoint.

3. Step 3: Assign max-width for desktops (large screens)

   Use lg:max-w-xl to set extra-large max-width starting at large breakpoint.

4. Final Answer:

   max-w-sm md:max-w-md lg:max-w-xl -> Option D

5. Quick Check:

   Default small + medium at md + extra-large at lg = max-w-sm md:max-w-md lg:max-w-xl [OK]

Hint: Set default, then md: and lg: for tablet and desktop widths [OK]

Common Mistakes:

• Using sm: for mobile default instead of no prefix
• Skipping the large breakpoint for desktop
• Mixing up breakpoint order