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.