Tailwind Sizing Width and Height

Every element on a page takes up space. Tailwind CSS gives you a complete set of classes to control exactly how wide and how tall an element is — from fixed pixel sizes to fluid percentages to screen-filling full values.

How Tailwind Measures Size

Tailwind uses a spacing scale based on rem units. Each step in the scale equals 4px by default.

Scale value 1  = 0.25rem = 4px
Scale value 2  = 0.5rem  = 8px
Scale value 4  = 1rem    = 16px
Scale value 8  = 2rem    = 32px
Scale value 16 = 4rem    = 64px

The same scale applies to both width and height utilities.

Width Classes

Fixed Width Using the Scale

<div class="w-0">0px wide</div>
<div class="w-1">4px wide</div>
<div class="w-4">16px wide</div>
<div class="w-8">32px wide</div>
<div class="w-16">64px wide</div>
<div class="w-32">128px wide</div>
<div class="w-64">256px wide</div>

Visual Width Scale Diagram

w-4   → [████]
w-8   → [████████]
w-16  → [████████████████]
w-32  → [████████████████████████████████]
w-64  → [████████████████████████████████████████████████████████████████]

Percentage-Based Width

Percentage widths are relative to the parent element. Think of the parent as a full-width box; fractions divide it.

<div class="w-1/2">50% of parent</div>
<div class="w-1/3">33% of parent</div>
<div class="w-2/3">66% of parent</div>
<div class="w-1/4">25% of parent</div>
<div class="w-3/4">75% of parent</div>
<div class="w-full">100% of parent</div>

Fraction Width Diagram

Parent box (full width = 100%)
┌──────────────────────────────┐
│ w-full                       │  100%
├───────────────┬──────────────┤
│ w-1/2         │ w-1/2        │  50% each
├──────┬────────┴──────┬───────┤
│ w-1/4│    w-1/2      │ w-1/4 │
└──────┴───────────────┴───────┘

Viewport and Special Width Values

<div class="w-screen">Full viewport width</div>
<div class="w-min">Shrinks to minimum content width</div>
<div class="w-max">Grows to maximum content width</div>
<div class="w-fit">Fits exactly to content size</div>
<div class="w-auto">Browser decides width</div>

When to Use Each Special Value

w-screen → full-width hero banners, overlays
w-min    → button that wraps to fit short text
w-max    → tooltip that expands to fit long text
w-fit    → inline tag/badge that hugs its content
w-auto   → default flow behavior

Max Width and Min Width

Max width limits how wide an element can grow. Min width ensures an element never shrinks below a certain size.

Max Width Classes

<div class="max-w-xs">Max 320px</div>
<div class="max-w-sm">Max 384px</div>
<div class="max-w-md">Max 448px</div>
<div class="max-w-lg">Max 512px</div>
<div class="max-w-xl">Max 576px</div>
<div class="max-w-2xl">Max 672px</div>
<div class="max-w-4xl">Max 896px</div>
<div class="max-w-7xl">Max 1280px</div>
<div class="max-w-full">Max 100% of parent</div>
<div class="max-w-screen-lg">Max screen-lg breakpoint</div>

Container Centering Pattern

<div class="max-w-4xl mx-auto px-4">
  Centered content with max width
</div>

Diagram:
|←──── browser ────→|
   |← max-w-4xl →|
   (centered with mx-auto)

Min Width Classes

<div class="min-w-0">Can shrink to 0</div>
<div class="min-w-full">Always at least 100% wide</div>
<div class="min-w-min">At least min-content wide</div>
<div class="min-w-max">At least max-content wide</div>

Height Classes

Fixed Height Using the Scale

<div class="h-1">4px tall</div>
<div class="h-4">16px tall</div>
<div class="h-8">32px tall</div>
<div class="h-16">64px tall</div>
<div class="h-32">128px tall</div>
<div class="h-64">256px tall</div>

Height Visual Diagram

h-4    h-8    h-16   h-32
 ___    ___    ___    ___
|   |  |   |  |   |  |   |
|___|  |   |  |   |  |   |
       |___|  |   |  |   |
              |___|  |   |
                     |   |
                     |___|

Viewport Height

<div class="h-screen">Full viewport height</div>
<div class="h-full">100% of parent height</div>
<div class="h-auto">Height set by content</div>
<div class="h-svh">Small viewport height (mobile-safe)</div>
<div class="h-dvh">Dynamic viewport height</div>

Viewport Height on Mobile

h-screen  → 100vh (may include browser chrome on mobile)
h-svh     → 100svh (excludes browser bar — better for mobile)
h-dvh     → 100dvh (updates when browser bar shows/hides)

Mobile screen (with browser bar):
┌──────────────┐ ← top of browser
│ [address bar]│
├──────────────┤ ← actual content start
│              │
│   h-svh      │  ← fills this area
│              │
└──────────────┘

Max Height and Min Height

<div class="max-h-40">Never taller than 160px</div>
<div class="max-h-screen">Never taller than viewport</div>
<div class="max-h-full">Never taller than parent</div>

<div class="min-h-0">Can shrink to nothing</div>
<div class="min-h-full">Always at least as tall as parent</div>
<div class="min-h-screen">Always at least viewport height</div>

Square Sizing

The size utility sets width and height to the same value at once. This is perfect for icons, avatars, and square elements.

<div class="size-4">16px × 16px</div>
<div class="size-8">32px × 32px</div>
<div class="size-16">64px × 64px</div>
<div class="size-full">100% × 100%</div>

Before Tailwind v3.4 added size-, developers wrote w-8 h-8 instead. Both work; size-8 is just shorter.

Aspect Ratio

Aspect ratio keeps proportions correct when only width is set. Like a TV screen — 16:9 means for every 16 units wide, it is 9 units tall.

<div class="aspect-square">Always a square (1:1)</div>
<div class="aspect-video">16:9 ratio (video format)</div>
<div class="aspect-auto">Natural size</div>

aspect-square  → ■ (equal width and height)
aspect-video   → ▬ (wider than tall, like YouTube)

Practical Responsive Image with Aspect Ratio

<div class="w-full aspect-video bg-gray-200">
  <img src="video-thumbnail.jpg" class="w-full h-full object-cover">
</div>

This image always stays in 16:9 format no matter how wide the screen is.

Object Fit — Controlling Images Inside Sized Boxes

When you fix the size of an image container, use object-fit to control how the image fills that space.

<img class="w-64 h-40 object-cover">    <!-- crops to fill -->
<img class="w-64 h-40 object-contain"> <!-- shrinks to fit -->
<img class="w-64 h-40 object-fill">    <!-- stretches -->
<img class="w-64 h-40 object-none">    <!-- original size, no scaling -->

Object Fit Diagram

Image in a 4×2 box:

object-cover   → ████████  (fills box, crops edges)
                 ████████

object-contain → ·██████·  (fits inside, gaps on sides)
                 ·██████·

object-fill    → ████████  (stretches to fill exactly)
                 ████████  (may distort)

Common Sizing Patterns

Full-Width Section with Centered Content

<section class="w-full min-h-screen bg-gray-50">
  <div class="max-w-5xl mx-auto px-6 py-16">
    Page content here
  </div>
</section>

Fixed Avatar Circle

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

Sidebar and Main Content Layout

<div class="flex">
  <aside class="w-64 min-h-screen bg-gray-100">Sidebar</aside>
  <main class="flex-1">Main content</main>
</div>

Layout Diagram

┌──────────┬─────────────────────────────┐
│  w-64    │  flex-1 (takes rest)        │
│ sidebar  │  main content               │
│          │                             │
└──────────┴─────────────────────────────┘

Quick Reference

NEED                        CLASS
──────────────────────────────────────────────
Fixed width (128px)         w-32
Full width                  w-full
50% of parent               w-1/2
Max width container         max-w-4xl mx-auto
Screen height section       min-h-screen
Fixed square                size-16
Video ratio image           aspect-video
Image that fills and crops  object-cover
Height from content         h-auto