Width utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width of the div to 16rem using Tailwind CSS.

Tailwind

<div class="w-[1] bg-blue-500 text-white p-4">Hello</div>

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

A16

B64

C4

D32

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing '16' thinking it means 16rem directly.

Using '4' or '32' which correspond to smaller widths.

The class w-64 sets the width to 16rem in Tailwind CSS because 1 unit equals 0.25rem, so 64 * 0.25rem = 16rem.

2fill in blank

medium

Complete the code to make the div take full width of its container using Tailwind CSS.

Tailwind

<div class="[1] bg-green-500 text-white p-4">Full width</div>

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

Aw-full

Bw-max

Cw-min

Dw-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using w-auto which sizes to content width.

Using w-min or w-max which set min or max content widths.

The class w-full makes the element take 100% width of its parent container.

3fill in blank

hard

Fix the error in the code to set the width to 50% using Tailwind CSS.

Tailwind

<div class="w-[1] bg-red-500 text-white p-4">Half width</div>

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

Ahalf

B50

C1/2

Dw-50

Attempts:

3 left

💡 Hint

Common Mistakes

Using '50' or 'half' which are not valid Tailwind width classes.

Adding 'w-' twice like 'w-w-1/2'.

Tailwind uses fraction notation like w-1/2 to set widths as percentages. The correct class is w-1/2.

4fill in blank

hard

Fill both blanks to create a div with a fixed width of 8rem and a max width of 100% using Tailwind CSS.

Tailwind

<div class="[1] [2] bg-yellow-400 p-4">Fixed and max width</div>

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

Aw-32

Bmax-w-full

Cw-full

Dmax-w-32

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing w-full with max width classes.

Using max-w-32 instead of max-w-full.

w-32 sets width to 8rem (32 * 0.25rem). max-w-full limits max width to 100% of container.

5fill in blank

hard

Fill all three blanks to create a responsive div that is full width on small screens, 50% width on medium screens, and 25% width on large screens using Tailwind CSS.

Tailwind

<div class="[1] md:[2] lg:[3] bg-purple-600 text-white p-4">Responsive width</div>

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

Aw-full

Bw-1/2

Cw-1/4

Dw-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Not using responsive prefixes like md: and lg:.

Using w-auto which sizes to content, not percentages.

w-full sets full width on small screens. md:w-1/2 sets 50% width on medium screens. lg:w-1/4 sets 25% width on large screens.