iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Sizing (w, h)

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Sizing utilities (w-*, h-*, min-*, max-*, size-*) cover every dimension you want to set. The scale is consistent, the arbitrary-value escape hatch is one line, and modern logical-property variants handle RTL automatically.

width, height, size-, min/max, fractions

EXAMPLE
<!-- 1) Width + height — the spacing scale -->
<div class="w-4 h-4">      <!-- 1rem × 1rem  (16px × 16px) -->
<div class="w-8 h-8">      <!-- 2rem × 2rem -->
<div class="w-12 h-12">    <!-- 3rem × 3rem -->
<div class="w-full h-full"> <!-- 100% -->
<div class="w-screen">      <!-- 100vw -->
<div class="h-screen">      <!-- 100vh — careful on mobile -->
<div class="h-dvh">         <!-- 100dvh — DYNAMIC vh; respects mobile bars -->
<div class="h-svh">         <!-- small viewport -->
<div class="h-lvh">         <!-- large viewport -->

<!-- 2) size-* — shorthand for w + h (Tailwind 3.4+) -->
<div class="size-12">      <!-- w-12 + h-12 — useful for buttons / avatars -->
<div class="size-full">    <!-- w-full + h-full -->
<div class="size-px">      <!-- 1px × 1px -->

<!-- 3) Fractions + percentages -->
<div class="w-1/2">        <!-- 50% -->
<div class="w-1/3">        <!-- 33.3333% -->
<div class="w-2/3">
<div class="w-1/4 w-3/4 w-1/5 w-1/6">
<div class="w-11/12">      <!-- 91.6667% -->

<!-- 4) Min + max -->
<div class="min-w-0">      <!-- 0 — important for flex children to shrink below content -->
<div class="min-w-min">    <!-- min-content -->
<div class="min-w-max">    <!-- max-content -->
<div class="min-w-fit">    <!-- fit-content -->
<div class="max-w-md">     <!-- 28rem — typography max widths -->
<div class="max-w-prose">  <!-- 65ch — comfortable reading -->
<div class="max-w-screen-lg"> <!-- 1024px -->
<div class="max-w-7xl">    <!-- 80rem — typical container width -->

<!-- 5) Common patterns -->
<!-- Square avatar -->
<img class="size-10 rounded-full" />

<!-- Sticky button row -->
<button class="w-full">Save</button>
<button class="w-full md:w-auto">Save</button>     <!-- full width on mobile, natural width on md+ -->

<!-- Centered article -->
<article class="max-w-prose mx-auto px-4">…</article>

<!-- 12-column grid -->
<div class="grid grid-cols-12 gap-4">
    <aside class="col-span-3">Sidebar</aside>
    <main  class="col-span-9">Main</main>
</div>

<!-- 6) Flex item sizing -->
<div class="flex gap-4">
    <div class="flex-none">       <!-- don't grow / shrink -->
    <div class="flex-1">          <!-- grow + shrink + basis 0 -->
    <div class="flex-auto">       <!-- grow + shrink + basis auto -->
    <div class="basis-1/2">       <!-- explicit basis -->
    <div class="shrink-0">        <!-- never shrink -->
    <div class="grow">             <!-- 1; share remaining space -->
</div>

<!-- 7) Grid item sizing -->
<div class="grid grid-cols-3 gap-4">
    <div class="col-span-2">       <!-- spans 2 cols -->
    <div class="col-start-2 col-end-4">  <!-- explicit start/end -->
    <div class="row-span-2">       <!-- spans 2 rows -->
</div>

<!-- Auto-fit columns by min width -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">…</div>

<!-- 8) Aspect ratio -->
<img class="w-full aspect-video" src="…" />        <!-- 16/9 -->
<div class="aspect-square">…</div>                 <!-- 1/1 -->
<div class="aspect-[4/3]">…</div>                  <!-- arbitrary -->

<!-- 9) Logical properties (RTL-friendly) -->
<div class="w-full ps-4 pe-4 ms-auto me-2">       <!-- padding-inline-start/end; margin-inline -->
<div class="inline-size-full block-size-screen">  <!-- logical width / height -->

<!-- 10) Arbitrary values — escape hatch for one-offs -->
<div class="w-[317px]">
<div class="h-[calc(100vh-64px)]">
<div class="size-[3.5rem]">
<div class="max-w-[min(90%,40rem)]">
<!-- Use sparingly — prefer the scale, promote to theme when reused. -->

<!-- 11) Responsive variants -->
<div class="w-full sm:w-2/3 md:w-1/2 lg:w-1/3">…</div>
<div class="h-32 md:h-48 lg:h-64">…</div>

<!-- 12) Padding + margin — same scale, different axes -->
<div class="p-4 px-6 py-2 mx-auto my-8">…</div>
<div class="space-y-4">                              <!-- gap between vertical siblings -->
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

<!-- 13) Common bugs -->
<!--   • Using h-screen on mobile → URL bar makes the page longer than expected; use h-dvh -->
<!--   • min-w-0 missing on flex children — children refuse to shrink, layout breaks -->
<!--   • Arbitrary value with quoted unit ('200px' inside the bracket) — drop quotes -->
<!--   • Using w-full on a flex child without flex-1 — fills but doesn't share rest of space -->
<!--   • Forgetting overflow handling on max-w containers — long words push width; add break-words -->
<!--   • Mixing fixed h-* with content that overflows — set max-h + overflow-auto -->
<!--   • Aspect ratio with width 0 — set w-full or min-w-* so the element has size -->

Why it matters

Tailwind’s sizing scale is your friend — use the scale, fractions, and the size-* shorthand for square things. Reach for min-w-0 on flex children that refuse to shrink, prefer h-dvh over h-screen on mobile, and let max-w-prose + mx-auto handle long-form reading widths.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="w-1/2 h-screen max-w-md min-w-0">…</div>
Try it Yourself »

Discussion

Loading…