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.