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.

Practice

1. Which Tailwind class sets an element's width to 100% of its parent container?

easy

A. w-full

B. w-auto

C. w-1/2

D. w-0

Solution

1. Step 1: Understand the meaning of w-full

   The class w-full sets the width to 100% of the parent container.

2. Step 2: Compare with other options

   w-auto lets width adjust to content, w-1/2 sets width to 50%, and w-0 sets width to zero.

3. Final Answer:

   w-full -> Option A

4. Quick Check:

   Full width = w-full [OK]

Hint: Full width always uses w-full class [OK]

Common Mistakes:

• Confusing w-auto with full width
• Thinking w-1/2 means full width
• Using w-0 expecting full width

2. Which of these is the correct Tailwind class to set an element's width to 25%?

easy

A. w-1/4

B. w-1/3

C. w-1/2

D. w-3/4

Solution

1. Step 1: Recall fraction width classes in Tailwind

   w-1/4 means width is 1/4 or 25% of the parent container.

2. Step 2: Verify other options

   w-1/3 is about 33%, w-1/2 is 50%, and w-3/4 is 75% width.

3. Final Answer:

   w-1/4 -> Option A

4. Quick Check:

   25% width = w-1/4 [OK]

Hint: Fraction classes use w-1/4, w-1/2, etc. [OK]

Common Mistakes:

• Mixing up w-1/3 with 25%
• Using w-3/4 expecting 25%
• Forgetting fraction syntax

3. What width will the following element have?

<div class="w-3/5">Content</div>

medium

A. 75% of the parent container

B. 50% of the parent container

C. 60% of the parent container

D. 100% of the parent container

Solution

1. Step 1: Understand the class w-3/5

   This class sets the width to 3 parts out of 5, which is 60% of the parent container.

2. Step 2: Compare with other options

   50% is w-1/2, 75% is w-3/4, and 100% is w-full.

3. Final Answer:

   60% of the parent container -> Option C

4. Quick Check:

   w-3/5 = 60% width [OK]

Hint: Divide numerator by denominator in fraction class [OK]

Common Mistakes:

• Assuming w-3/5 means 3%
• Confusing with w-1/2
• Ignoring fraction meaning

4. Identify the error in this Tailwind width usage:

<div class="w-7/3">Box</div>

medium

A. Fraction denominator cannot be greater than numerator

B. Fraction denominator cannot be zero

C. Fraction numerator cannot be greater than denominator

D. Tailwind does not support fractions greater than 1

Solution

1. Step 1: Analyze the fraction 7/3 in Tailwind width

   Tailwind width fractions represent parts of the parent width and must be between 0 and 1 (numerator ≤ denominator).

2. Step 2: Check Tailwind support for fractions > 1

   Tailwind does not support fractions greater than 1 for width utilities; w-7/3 is invalid.

3. Final Answer:

   Tailwind does not support fractions greater than 1 -> Option D

4. Quick Check:

   Width fractions must be ≤ 1 [OK]

Hint: Width fractions must be ≤ 1 in Tailwind [OK]

Common Mistakes:

• Thinking numerator must be less than denominator
• Assuming denominator can't be zero (not relevant here)
• Using invalid fraction > 1

5. You want a responsive layout where a box is full width on small screens but 1/3 width on medium and larger screens. Which Tailwind classes achieve this?

<div class="?">Box</div>

hard

A. w-1/3 md:w-full

B. w-full md:w-1/3

C. w-auto md:w-1/3

D. w-1/3 w-full

Solution

1. Step 1: Understand responsive prefixes in Tailwind

   md: prefix applies styles at medium screen sizes and above.

2. Step 2: Set full width by default and 1/3 width on medium screens

   Use w-full for small screens and md:w-1/3 for medium+ screens.

3. Final Answer:

   w-full md:w-1/3 -> Option B

4. Quick Check:

   Default full, medium 1/3 = w-full md:w-1/3 [OK]

Hint: Use responsive prefix like md: for screen size changes [OK]

Common Mistakes:

• Reversing order of widths
• Not using responsive prefix
• Using w-auto instead of fixed width