Tailwind CSS 8 🎨 Sizing Utilities (Width, Height, Min/Max Bounds, Fraction Values) - KandZ

Sizing utilities control how much space an element occupies. Width, height, minimums, maximums, and fractions form a coordinated system that determines an element’s footprint in the layout. Tailwind’s sizing utilities derive from the same spacing scale used by padding and margin, which means w-4 and p-4 refer to the same 1rem unit. This coherence keeps layouts predictable: a component with p-4 and w-64 uses the same underlying measurement for both its internal spacing and its external dimensions.

The utility families are w-* for width, h-* for height, size-* for both simultaneously, and min-w-*, max-w-*, min-h-*, max-h-* for bounds. Each accepts numeric spacing values, fractions of the parent, viewport units, content-based keywords, and arbitrary values. The choice among these options determines whether an element is fixed, fluid, or content-driven. Getting this right is the difference between a layout that adapts gracefully and one that breaks at unexpected viewport sizes.

Key point: Width and height utilities accept spacing values (w-4 = 1rem), fractions (w-1/2 = 50%), viewport units (h-screen, h-dvh), and content keywords (w-fit, h-min). Use min-w-0 on flex children to allow shrinking, max-w-prose for readable text, and size-* when width and height are equal.

Why sizing utilities exist

The layout control problem. Every element in a page has a width and a height, whether explicitly set or determined by content. Without a system for controlling these dimensions, layouts become unpredictable: a button that stretches to fill available space when it should be fixed, a card that overflows its container because nothing constrains its width, a sidebar that collapses when content is short. Sizing utilities give explicit control over each dimension.

The consistency problem. A hardcoded width: 237px in one component and width: 240px in another creates visual drift. The spacing scale provides a shared vocabulary, so w-60 means the same thing everywhere and relationships between elements remain consistent.

The responsiveness problem. Layouts must adapt to different viewport sizes. A sidebar that is w-64 on desktop might need to be w-full on mobile. Sizing utilities accept responsive prefixes, making these adaptations explicit and declarative.

The content-versus-container problem. Some elements should size to their content; others should fill their container; others should occupy a specific fraction. The keywords min, max, fit, and auto express these intents, while fractions and viewport units handle proportional and screen-relative sizing .

a. Width utilities

The w-* prefix controls width. It accepts several value types, each serving a different purpose .

Value Type	Example	CSS Output	Use Case
Spacing scale	`w-4`	`width: 1rem`	Fixed widths
Fraction	`w-1/2`	`width: 50%`	Proportional to parent
Full	`w-full`	`width: 100%`	Fill container
Viewport	`w-screen`	`width: 100vw`	Full viewport width
Dynamic viewport	`w-dvw`	`width: 100dvw`	Adapts to mobile browser UI
Content-based	`w-fit`	`width: fit-content`	Shrink to content
Content-based	`w-min`	`width: min-content`	Smallest possible
Content-based	`w-max`	`width: max-content`	Largest intrinsic size
Auto	`w-auto`	`width: auto`	Browser default

A fixed-width sidebar:

<aside class="w-64 bg-gray-100">Sidebar</aside>

A responsive layout that splits the available space:

<div class="flex">
  <div class="w-1/3 bg-blue-100">One third</div>
  <div class="w-2/3 bg-green-100">Two thirds</div>
</div>

A container that fills its parent:

<div class="w-full max-w-md mx-auto">Centered, capped width</div>

The dynamic viewport units (dvw, dvh) account for mobile browser chrome that expands and contracts during scrolling, making them more accurate than vw/vh on mobile devices .

b. Height utilities

The h-* prefix controls height and accepts the same value types as width .

Value Type	Example	CSS Output
Spacing scale	`h-8`	`height: 2rem`
Fraction	`h-1/2`	`height: 50%`
Full	`h-full`	`height: 100%`
Screen	`h-screen`	`height: 100vh`
Dynamic viewport	`h-dvh`	`height: 100dvh`
Content-based	`h-fit`, `h-min`, `h-max`	Various
Auto	`h-auto`	`height: auto`

A full-height page section:

<section class="h-screen bg-blue-500">Full viewport height</section>

A more reliable full-height for mobile:

<section class="h-dvh bg-blue-500">Dynamic viewport height</section>

A fixed-height header:

<header class="h-16 bg-white shadow">Header</header>

The h-full utility resolves to 100% of the parent’s height, which requires the parent to have a defined height. When the parent’s height is not defined, h-full has no effect. For a page that should reach the visible screen, min-h-dvh is often more reliable than h-full because it does not depend on the entire ancestor chain having explicit heights .

c. The size-* shorthand

The size-* utilities set width and height simultaneously, which is useful for elements that should be square .

<!-- Avatar: square, 48px -->
<img class="size-12 rounded-full" src="avatar.jpg" alt="" />

<!-- Icon button: square, 40px -->
<button class="size-10 flex items-center justify-center rounded">
  <svg>...</svg>
</button>

size-12 compiles to width: 3rem; height: 3rem. The available values mirror the width and height utilities: spacing scale, fractions, size-full, size-screen, size-dvh, and content-based keywords.

d. Minimum and maximum bounds

Bounds constrain an element without fixing its size. They are useful when content determines the dimension but a limit is needed.

Minimum width (min-w-*) ensures an element is never narrower than a threshold .

<div class="min-w-64">Never narrower than 16rem</div>

The most important use of min-w-0 is on flex children. By default, flex items have an automatic minimum size based on their content, which prevents shrinking below the content’s intrinsic width. A long filename in a flex row will overflow rather than truncate. Setting min-w-0 on the flex child allows it to shrink below its content width, enabling truncation to work .

<div class="flex max-w-md gap-3">
  <div class="min-w-0 flex-1">
    <p class="truncate">a-very-long-file-name-that-must-fit.txt</p>
  </div>
</div>

Maximum width (max-w-*) caps the width of an element .

<article class="max-w-prose mx-auto px-4">
  Long-form content stays readable at all viewport sizes.
</article>

The max-w-prose utility applies 65ch, which is a measure-based constraint designed for readability. The max-w-screen-* variants (max-w-screen-md, max-w-screen-lg) cap width to the corresponding breakpoint value.

Maximum height (max-h-*) caps height, commonly used with overflow-y-auto for scrollable panels .

<div class="max-h-96 overflow-y-auto">
  Scrollable content
</div>

Minimum height (min-h-*) ensures a floor for height. min-h-dvh is the modern way to make a page at least as tall as the viewport without forcing h-full through the entire ancestor chain .

e. Fraction values

Fractions express width or height as a percentage of the parent. Tailwind generates a standard set of fractions .

Class	CSS	Common Use
`w-1/2`	`50%`	Half-width split
`w-1/3`	`33.333%`	Three-column layout
`w-2/3`	`66.667%`	Two-thirds content area
`w-1/4`	`25%`	Four-column layout
`w-3/4`	`75%`	Wide sidebar
`w-1/5`	`20%`	Five-column layout
`w-2/5`	`40%`	Sidebar + main split
`w-3/5`	`60%`	Main content
`w-1/6`	`16.667%`	Six-column layout
`w-5/6`	`83.333%`	Very wide content

A two-column layout:

<div class="flex">
  <div class="w-1/4 bg-gray-100">Sidebar</div>
  <div class="w-3/4 bg-white">Main content</div>
</div>

Fractions also work with min-w-* and max-w-* :

<div class="min-w-1/2 max-w-full">At least half, at most full</div>

f. Viewport and container-relative sizing

Viewport units size an element relative to the browser window, not its parent .

Class	CSS	Notes
`w-screen`	`100vw`	Full viewport width
`h-screen`	`100vh`	Full viewport height
`h-dvh`	`100dvh`	Dynamic viewport height
`h-svh`	`100svh`	Small viewport height
`h-lvh`	`100lvh`	Large viewport height

The dvh, svh, and lvh units address the mobile browser chrome problem. On mobile, the visible viewport changes as the address bar hides and shows during scrolling. 100vh is fixed to the largest possible viewport, which causes content to be cut off when the address bar is visible. 100dvh adapts to the current visible viewport, 100svh uses the smallest (address bar visible), and 100lvh uses the largest (address bar hidden) .

For a hero section that should fill the visible screen on mobile:

<section class="h-dvh flex items-center justify-center">
  Hero content
</section>

Container-relative sizing uses named container sizes (max-w-md, w-lg) that map to the --container-* theme variables. These are useful for constraining content areas to standard widths .

g. Responsive and state variants

Every sizing utility accepts responsive prefixes and state modifiers.

<!-- Full width on mobile, half on medium and up -->
<div class="w-full md:w-1/2">Responsive width</div>

<!-- Fixed height on mobile, full viewport on large screens -->
<section class="h-auto lg:h-dvh">Responsive height</section>

<!-- Size changes on hover -->
<div class="size-8 hover:size-10 transition-all">Icon</div>

The pattern is mobile-first: start with the small-screen value and override at larger breakpoints. w-full md:w-1/2 means 100% on small screens and 50% from the md breakpoint upward .

Complete Example Session

<!-- ============================================
PART 1: FIXED-WIDTH SIDEBAR
============================================ -->
<aside class="w-64 bg-gray-100 p-4">Sidebar</aside>

<!-- ============================================
PART 2: FULL-WIDTH CONTAINER WITH CAP
============================================ -->
<div class="w-full max-w-md mx-auto px-4">
  Centered, capped width container.
</div>

<!-- ============================================
PART 3: FRACTION COLUMNS
============================================ -->
<div class="flex">
  <div class="w-1/3 bg-blue-100 p-4">One third</div>
  <div class="w-2/3 bg-green-100 p-4">Two thirds</div>
</div>

<!-- ============================================
PART 4: FULL VIEWPORT HEIGHT
============================================ -->
<section class="h-dvh flex items-center justify-center bg-gray-50">
  <h1>Full viewport height section</h1>
</section>

<!-- ============================================
PART 5: SQUARE AVATAR WITH SIZE
============================================ -->
<img class="size-12 rounded-full" src="avatar.jpg" alt="" />

<!-- ============================================
PART 6: SCROLLABLE PANEL
============================================ -->
<div class="max-h-96 overflow-y-auto border p-4">
  <p>Long content that scrolls when it exceeds max height.</p>
</div>

<!-- ============================================
PART 7: FLEX SHRINK WITH MIN-W-0
============================================ -->
<div class="flex max-w-md gap-3">
  <div class="min-w-0 flex-1">
    <p class="truncate">a-very-long-file-name-that-must-fit.txt</p>
  </div>
</div>

<!-- ============================================
PART 8: READABLE ARTICLE WIDTH
============================================ -->
<article class="max-w-prose mx-auto px-4">
  <p>Long-form content constrained to a readable measure.</p>
</article>

<!-- ============================================
PART 9: RESPONSIVE SIZING
============================================ -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width from full to a third.
</div>

<!-- ============================================
PART 10: CARD WITH CONSISTENT DIMENSIONS
============================================ -->
<div class="w-80 max-w-full bg-white rounded-lg shadow p-6">
  <img class="w-full h-40 object-cover rounded" src="cover.jpg" alt="" />
  <h2 class="mt-4 text-lg font-semibold">Card title</h2>
  <p class="mt-2 text-gray-600">Card description text.</p>
</div>

These ten parts cover fixed widths, capped containers, fractional columns, viewport heights, square elements, scrollable panels, flex shrinking, readable measures, responsive sizing, and a composed card. Each pattern uses the sizing system idiomatically.

Quick Reference

Width Values

Class	CSS	Use
`w-4`	`1rem`	Fixed
`w-full`	`100%`	Fill parent
`w-1/2`	`50%`	Half of parent
`w-screen`	`100vw`	Viewport width
`w-fit`	`fit-content`	Shrink to content
`w-auto`	`auto`	Browser default

Height Values

Class	CSS	Use
`h-8`	`2rem`	Fixed
`h-full`	`100%`	Fill parent (needs parent height)
`h-screen`	`100vh`	Viewport height
`h-dvh`	`100dvh`	Dynamic viewport height
`h-auto`	`auto`	Content height

Bounds

Class	CSS	Use
`min-w-0`	`min-width: 0`	Allow flex shrink
`min-w-64`	`min-width: 16rem`	Minimum fixed
`max-w-prose`	`max-width: 65ch`	Readable text
`max-w-screen-md`	`max-width: 768px`	Cap to breakpoint
`max-h-96`	`max-height: 24rem`	Scrollable panel

Size Shorthand

Class	Width	Height
`size-12`	`3rem`	`3rem`
`size-full`	`100%`	`100%`
`size-px`	`1px`	`1px`
`size-fit`	`fit-content`	`fit-content`

Best Practices

✅ Do This:

<div class="w-full max-w-md mx-auto">Centered, capped container</div>
<div class="min-w-0 flex-1 truncate">Flex child that can shrink</div>
<article class="max-w-prose mx-auto">Readable content</article>
<section class="min-h-dvh">At least full viewport</section>
<img class="size-12 rounded-full" />

❌ Don’t Do This:

<div class="h-full">Height without parent height set</div>
<div class="w-[237px]">Arbitrary when w-60 exists</div>
<div class="flex-1 truncate">Missing min-w-0 (won't truncate)</div>
<section class="h-screen">On mobile (address bar cuts off)</section>

Common Pitfalls

Pitfall	Why It Happens	Fix
`h-full` does nothing	Parent has no defined height	Use `min-h-dvh` or set parent height
Truncation fails in flex	Default min-width is content-based	Add `min-w-0` to flex child
Mobile height cut off	`100vh` ignores address bar	Use `h-dvh` or `min-h-dvh`
Fraction doesn’t fit	Parent has padding or gap	Account for parent’s own sizing
Content overflows max height	No `overflow` set	Add `overflow-y-auto` with `max-h-*`
Square element not square	Only `w-` or `h-` set	Use `size-*` for both

Real-World Examples

1. Fixed Sidebar

<aside class="w-64 shrink-0">Sidebar</aside>

2. Centered Container

<div class="w-full max-w-4xl mx-auto px-4">Content</div>

3. Two-Column Split

<div class="flex">
  <div class="w-1/3">Sidebar</div>
  <div class="w-2/3">Main</div>
</div>

4. Full-Height Page

<div class="min-h-dvh flex flex-col">Page</div>

5. Square Icon Button

<button class="size-10 flex items-center justify-center rounded">X</button>

6. Scrollable List

<ul class="max-h-64 overflow-y-auto">Items</ul>

7. Readable Article

<article class="max-w-prose mx-auto">Text</article>

8. Truncated Text in Flex

<div class="flex gap-2">
  <div class="min-w-0 flex-1 truncate">Long text...</div>
  <button>Action</button>
</div>

9. Responsive Grid Items

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="w-full">Item</div>
</div>

10. Aspect-Ratio Card

<div class="w-full max-w-sm">
  <img class="w-full aspect-video object-cover" src="thumb.jpg" />
</div>

Visual

Width Value Types

┌──────────────────────────────────────────────────────────────┐
│  w-4          → 1rem (spacing scale, fixed)                  │
│  w-full       → 100% (parent width)                          │
│  w-1/2        → 50% (fraction of parent)                     │
│  w-screen     → 100vw (viewport)                             │
│  w-fit        → fit-content (shrink to content)              │
│  w-min        → min-content (smallest possible)              │
│  w-max        → max-content (largest intrinsic)              │
│  w-auto       → auto (browser default)                       │
│                                                              │
│  Fixed: w-64      Fluid: w-full     Fractional: w-1/2        │
│  ┌──────────┐     ┌──────────────┐  ┌────────┬────────┐     │
│  │ 16rem    │     │ 100% parent  │  │ 50%    │ 50%    │     │
│  └──────────┘     └──────────────┘  └────────┴────────┘     │
└──────────────────────────────────────────────────────────────┘

Height and Viewport Units

┌──────────────────────────────────────────────────────────────┐
│  h-screen (100vh)          h-dvh (100dvh)                    │
│  ┌────────────────────┐    ┌────────────────────┐            │
│  │  ██████████████    │    │  ██████████████    │            │
│  │  ██ address bar ██ │    │  ██████████████    │            │
│  │  ██████████████    │    │  ██████████████    │            │
│  │  content cut off   │    │  content visible   │            │
│  └────────────────────┘    └────────────────────┘            │
│                                                              │
│  100vh assumes address bar is hidden.                        │
│  100dvh adapts to the current visible viewport.              │
└──────────────────────────────────────────────────────────────┘

Min-Width in Flex

┌──────────────────────────────────────────────────────────────┐
│  WITHOUT min-w-0                WITH min-w-0                 │
│                                                              │
│  ┌─────────────────────────┐    ┌─────────────────────────┐  │
│  │  ┌───────────────────┐  │    │  ┌───────────────────┐  │  │
│  │  │ long-filename.txt │  │    │  │ long-filename...  │  │  │
│  │  │ (overflows)       │  │    │  │ (truncated)       │  │  │
│  │  └───────────────────┘  │    │  └───────────────────┘  │  │
│  └─────────────────────────┘    └─────────────────────────┘  │
│                                                              │
│  Flex items default to min-content width, preventing          │
│  shrinking below content size. min-w-0 removes that floor.   │
└──────────────────────────────────────────────────────────────┘

Sizing Utility Families

┌──────────────────────────────────────────────────────────────┐
│  w-*        width          h-*        height                 │
│  └── fixed, full, fraction, screen, fit, min, max, auto      │
│                                                              │
│  size-*     width + height simultaneously                    │
│  └── square elements                                         │
│                                                              │
│  min-w-*    minimum width      max-w-*   maximum width       │
│  min-h-*    minimum height     max-h-*   maximum height      │
│  └── constrain without fixing                                │
│                                                              │
│  All accept: spacing numbers, fractions, viewport units,     │
│  content keywords, arbitrary values, responsive prefixes     │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Width prefix	`w-*`
Height prefix	`h-*`
Both dimensions	`size-*`
Minimum width	`min-w-*` (critical: `min-w-0` for flex)
Maximum width	`max-w-*` (`max-w-prose` = `65ch`)
Minimum height	`min-h-*` (`min-h-dvh` for pages)
Maximum height	`max-h-*` (pair with `overflow-y-auto`)
Fractions	`w-1/2`, `w-1/3`, `w-2/3`, `w-1/4`, etc.
Viewport units	`w-screen`, `h-screen`, `h-dvh`, `h-svh`, `h-lvh`
Content keywords	`w-fit`, `w-min`, `w-max`, `w-auto`
Arbitrary values	`w-[237px]`, `w-[50%]`, `w-[calc(100%-2rem)]`

Key takeaways:

Sizing derives from the spacing scale. w-4 and p-4 both equal 1rem, keeping dimensions and internal spacing consistent .
w-full is 100% of the parent, not the viewport. Use w-screen for viewport width. The parent’s own width and padding affect the result .
h-full requires the parent to have a defined height. For pages, min-h-dvh is more reliable because it does not depend on the ancestor chain .
Use min-w-0 on flex children that need to truncate. The default minimum is content-based, which prevents shrinking below the content’s intrinsic width .
max-w-prose (65ch) keeps text readable. It is a measure-based constraint, not a pixel value, and adapts to font size .
Use h-dvh instead of h-screen on mobile. Dynamic viewport units adapt to browser chrome, preventing content from being cut off .
size-* sets width and height together. Use it for avatars, icons, and any square element .
Fractions express proportional width or height. w-1/3 is 33.333% of the parent; combine fractions to create column layouts .

Remember: Sizing utilities control how much space an element occupies. Width and height accept fixed values, fractions, viewport units, and content-based keywords, each serving a different layout intent. The bounds — min-* and max-* — constrain dimensions without fixing them, and min-w-0 is specifically important for making flex children shrinkable so truncation works. size-* sets both dimensions when an element should be square. The viewport units dvh, svh, and lvh address the mobile browser chrome problem that makes 100vh unreliable on phones. Used together, these utilities give you precise control over layout dimensions while keeping the entire system on a single spacing scale.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!