Tailwind CSS Tutorial · Tailwind Basics · Lesson 7 of 27
Width, Height and Size
Setting widths and heights with the spacing scale, fractions, screen units and max-width, plus the size-* shortcut.
Widths
| Class | Width |
|---|---|
w-16, w-64 |
from the spacing scale (4rem, 16rem) |
w-1/2, w-2/3, w-full |
fractions and 100% |
w-screen |
100vw |
w-fit, w-min, w-max |
size to the content |
max-w-sm, max-w-2xl, max-w-prose |
cap the width (great for readable text) |
min-w-0 |
let flex children shrink (fixes overflowing text) |
Heights work the same with h-, min-h-, max-h-; h-dvh uses the dynamic viewport height (better on mobile
than h-screen). size-10 sets width and height at once.
<div class="space-y-2 p-6 text-sm text-white">
<div class="w-1/4 rounded bg-violet-500 p-2">w-1/4</div>
<div class="w-1/2 rounded bg-violet-500 p-2">w-1/2</div>
<div class="w-full rounded bg-violet-500 p-2">w-full</div>
<div class="w-fit rounded bg-violet-700 p-2">w-fit (as wide as its text)</div>
<div class="flex gap-2"><div class="size-8 rounded bg-pink-500"></div><div class="size-12 rounded bg-pink-500"></div><div class="size-16 rounded-full bg-pink-500"></div></div>
</div>
<article class="mx-auto max-w-prose p-6">
<h2 class="text-xl font-bold">Readable line length</h2>
<p class="mt-2 text-gray-700">max-w-prose keeps lines around 65 characters, which is comfortable to read. Without it, text on a wide screen stretches edge to edge and the eye loses its place at the start of each new line.</p>
</article>
Test yourself
Which class makes an element as wide as its parent?
w-fullw-screenw-fitw-auto-100
Show answer
Answer: w-full
w-full is width: 100% (of the parent); w-screen is 100vw.