Width utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class w-1/2 do?

It sets the element's width to 50% of its parent container's width.

beginner

How do you set a fixed width of 16rem using Tailwind CSS?

Use the class w-64, because Tailwind's spacing scale sets 64 to 16rem.

intermediate

What is the difference between w-full and w-screen in Tailwind CSS?

w-full sets width to 100% of the parent container, while w-screen sets width to 100% of the entire viewport width.

intermediate

How can you make an element take the minimum width needed to fit its content in Tailwind CSS?

Use the class w-min to make the element shrink to the smallest width that fits its content.

beginner

What Tailwind CSS class would you use to make an element's width 25% of its parent?

Use w-1/4 to set the width to 25%.

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

A w-full

B w-screen

C w-auto

D w-min

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

What does the class w-auto do in Tailwind CSS?

A Sets width to fit content automatically

B Sets width to 100%

C Sets width to 50%

D Sets width to 0

w-auto lets the element size itself based on its content.

If you want an element to be 75% width of its parent, which class should you use?

A w-1/3

B w-3/4

C w-1/2

D w-1/4

w-3/4 sets width to 75% of the parent.

Which class sets the width to the full viewport width in Tailwind CSS?

A w-full

B w-auto

C w-min

D w-screen

w-screen sets width to 100% of the viewport width.

How do you set a fixed width of 4rem using Tailwind CSS?

A w-16

B w-4

C w-8

D w-64

w-8 corresponds to 2rem in Tailwind's spacing scale.

Explain how Tailwind CSS width utilities help control element sizes in a responsive layout.

Think about how you can make elements take parts of the screen or fit content.

Describe the difference between w-full and w-screen in Tailwind CSS and when you might use each.

Consider the container vs the whole browser window.

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