Width, height, and sizing

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Width, height, and sizing—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Width, height, and sizing in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Width, height, and sizing in your own words.

Sizing utilities express layout intent: w-full, max-w-prose, h-screen, min-h-0 (critical in flex children that must shrink).

Readable line lengths

Use max-w-prose (~65ch) for body copy. Pair with mx-auto to center text columns on wide screens—same goal as Utility CSS width patterns.

Fractions and flex

w-1/2, w-1/3, and flex-1 cover common splits without custom percentages in a stylesheet.

Self-check

Why is min-h-0 sometimes required on flex children?
Which max-width utility targets comfortable reading measure?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Why might min-h-0 matter in a flex child?
Which max-width utility would you use for long articles?

No discussion yet. Be the first to ask a question.