Max-width responsive variants in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a max-width of 4xl on medium screens and above.

Tailwind

<div class="max-w-[1] md:max-w-4xl">Content</div>

Drag options to blanks, or click blank then click option'

Axl

B3xl

C2xl

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same max-width for base and medium screens, so no visible change.

Using an invalid size like '5xl' which is not in options.

The class md:max-w-4xl sets the max-width to 4xl on medium screens and larger. The base max-width here is set to 3xl.

2fill in blank

medium

Complete the code to apply a max-width of 2xl on small screens and 5xl on large screens.

Tailwind

<section class="max-w-[1] lg:max-w-5xl">Content</section>

Drag options to blanks, or click blank then click option'

Axl

B3xl

C2xl

D4xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a larger base max-width than the large screen max-width.

Confusing the breakpoint prefix like using md instead of lg.

The class max-w-2xl applies max-width 2xl on small screens by default, and lg:max-w-5xl overrides it on large screens.

3fill in blank

hard

Fix the error in the code to correctly apply max-width 3xl on medium screens.

Tailwind

<div class="max-w-xl md:max-w-[1]">Content</div>

Drag options to blanks, or click blank then click option'

A4xl

Bxl

C2xl

D3xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a smaller size like 2xl which does not meet the requirement.

Using a size without the md prefix.

The class md:max-w-3xl correctly sets max-width 3xl on medium screens and above.

4fill in blank

hard

Fill both blanks to create a responsive container with max-width 2xl on base and 6xl on extra-large screens.

Tailwind

<div class="max-w-[1] xl:max-w-[2]">Content</div>

Drag options to blanks, or click blank then click option'

A2xl

B4xl

C6xl

D3xl

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the breakpoint prefixes.

Using sizes that do not exist in Tailwind's max-width scale.

The base max-width is set to 2xl and on extra-large screens (xl) it changes to 6xl.

5fill in blank

hard

Fill all three blanks to create a responsive card with max-width xl on base, 3xl on medium, and 7xl on 2xl screens.

Tailwind

<article class="max-w-[1] md:max-w-[2] 2xl:max-w-[3]">Card content</article>

Drag options to blanks, or click blank then click option'

Axl

B3xl

C7xl

D5xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong breakpoint prefix like lg instead of 2xl.

Setting sizes in wrong order causing smaller max-width on larger screens.

The card has max-width xl by default, changes to 3xl on medium screens, and 7xl on 2xl screens for a smooth responsive design.

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