Max-width responsive variants in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does max-w-full do in Tailwind CSS?

It sets the element's maximum width to 100% of its parent's width, preventing it from growing larger than its container.

beginner

How do you apply a max-width only on medium screens and larger in Tailwind?

Use the responsive prefix md:max-w-[value]. For example, md:max-w-lg applies max-width large starting at medium screen size.

beginner

What is the purpose of responsive variants in Tailwind CSS?

They let you change styles like max-width at different screen sizes, making your design adapt smoothly to devices like phones, tablets, and desktops.

intermediate

Explain the difference between max-w-xs and max-w-full in Tailwind.

max-w-xs sets a small fixed max width (like 20rem), while max-w-full allows the element to be as wide as its container (100%).

beginner

How can you make an image responsive using max-width in Tailwind?

Add max-w-full to the image so it never exceeds its container's width, and use h-auto to keep its height proportional.

Which Tailwind class sets max-width to 100% of the parent container?

A max-w-screen-lg

B max-w-xs

C max-w-auto

D max-w-full

max-w-full ensures the element's max width is 100% of its container.

How do you apply a max-width only on large screens in Tailwind?

A max-w-lg:lg

B max-w-lg

C lg:max-w-[value]

D max-w-lg-lg

The prefix lg: applies styles starting at large screen sizes.

What does max-w-screen-md do in Tailwind?

A Sets max-width to the medium screen size width

B Sets max-width to 100% always

C Sets max-width to a fixed small size

D Removes max-width

max-w-screen-md limits width to the medium breakpoint width.

Which class combination makes an image scale down but never grow larger than its container?

A max-w-xs h-full

B max-w-full h-auto

C w-full h-full

D max-w-none h-auto

max-w-full limits width, h-auto keeps height proportional.

Why use responsive max-width variants in Tailwind?

A To adjust element width on different screen sizes

B To fix element width always

C To change font size responsively

D To add margins automatically

Responsive variants let you change max-width depending on screen size.

Describe how to use Tailwind CSS to make a container's max-width change on small, medium, and large screens.

Think about how you want the container to grow or shrink on phones, tablets, and desktops.

Explain why setting max-width with responsive variants is better than fixed widths for web design.

Consider how websites look on phones versus big monitors.

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