Width and Height

Size elements with w and h utilities, including fractions.

Syntaxclass="w-1/2 h-24 w-full"

Width and height utilities accept spacing steps, fractions, and keywords.

w-24 h-24 — fixed size from the scale.
w-1/2 — 50% of the parent.
w-full — 100% width.
w-screen h-screen — full viewport.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer makes an input field span its parent's full width by adding w-full, removing the need to set a pixel or percentage width.
A square avatar thumbnail is sized to 48x48 pixels using w-12 h-12 from Tailwind's spacing scale.
A hero section fills the entire viewport height using h-screen so the content always occupies a full-page view on first load.

More examples

Full-width input

w-full sets width: 100%, making the input expand to fill its parent container regardless of screen size.

<input
  type="text"
  class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none"
  placeholder="Search..."
/>

Fixed-size avatar

w-12 and h-12 fix the image at 3rem x 3rem; object-cover ensures the photo fills the square without distortion.

<img
  src="avatar.jpg"
  alt="User avatar"
  class="w-12 h-12 rounded-full object-cover"
/>

Fractional widths in grid

w-2/3 and w-1/3 divide the flex row into a two-thirds/one-third split using CSS width percentages derived from Tailwind's fraction scale.

<div class="flex gap-4">
  <div class="w-2/3 bg-blue-50 p-4 rounded">Main (2/3)</div>
  <div class="w-1/3 bg-gray-50 p-4 rounded">Aside (1/3)</div>
</div>

Discussion

Be the first to comment on this lesson.