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.