tailwindcss-sizing

Complete reference for Tailwind CSS v4.3 sizing utilities: width (`w-*`, `w-screen`, `w-full`, `w-auto`, `w-min`/`w-max`/`w-fit`), height (`h-*`, `h-screen`, `h-full`, and the `h-dvh` dynamic viewport height that accounts for browser UI), min/max constraints (`min-w-*`/`max-w-*`/`min-h-*`/`max-h-*`), logical sizing (`inline-*`/`block-*` and their min/max forms, since v4.2), and aspect-ratio (`aspect-square`, `aspect-video`, arbitrary ratios).

Includes common composition patterns: full-screen containers, constrained content width, image/video wrappers, and sidebar layouts.

Tailwind CSS Sizing Utilities

Comprehensive guide to sizing utilities in Tailwind CSS v4.3, including width, height, constraints, and aspect ratio controls.

Width Utilities

Basic Width Classes

• w-0 - w-96: Fixed widths from 0 to 384px
• w-full - 100% width
• w-screen - 100% of viewport width
• w-auto - Auto width
• w-min - min-content
• w-max - max-content
• w-fit - fit-content

Responsive Width

Apply different widths at different breakpoints:

<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

Height Utilities

Basic Height Classes

• h-0 - h-96: Fixed heights from 0 to 384px
• h-full - 100% height
• h-screen - 100% of viewport height (100vh)
• h-auto - Auto height
• h-min - min-content
• h-max - max-content
• h-fit - fit-content
• h-dvh - Dynamic viewport height (since v3.4)

Dynamic Viewport Height (h-dvh)

The h-dvh utility uses the dynamic viewport height, which accounts for browser UI elements:

<div class="h-dvh">
  Full dynamic viewport height
</div>

Logical Sizing (since v4.2)

Writing-mode-aware sizes: inline-* (inline-size) and block-* (block-size), plus min-inline-*, max-inline-*, min-block-*, max-block-*. They accept the spacing scale, fractions, full, screen, auto, and (for inline-*) the container scale (inline-sm, inline-xl, …).

<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0">
  Sized along the inline/block axes
</div>

Min/Max Width

min-width

• min-w-0 - min-width: 0
• min-w-full - min-width: 100%
• min-w-min - min-width: min-content
• min-w-max - min-width: max-content
• min-w-fit - min-width: fit-content

max-width

• max-w-none - max-width: none
• max-w-full - max-width: 100%
• max-w-screen-sm - Based on breakpoints
• max-w-screen-md
• max-w-screen-lg
• max-w-screen-xl
• max-w-screen-2xl

Min/Max Height

min-height

• min-h-0 - min-height: 0
• min-h-full - min-height: 100%
• min-h-screen - min-height: 100vh
• min-h-min - min-height: min-content
• min-h-max - min-height: max-content
• min-h-fit - min-height: fit-content

max-height

• max-h-none - max-height: none
• max-h-full - max-height: 100%
• max-h-screen - max-height: 100vh
• max-h-min - max-height: min-content
• max-h-max - max-height: max-content
• max-h-fit - max-height: fit-content

Aspect Ratio

Common Aspect Ratios

• aspect-auto - auto
• aspect-square - 1 / 1
• aspect-video - 16 / 9

Custom Aspect Ratios

<!-- 3:2 ratio -->
<div class="aspect-[3/2]">
  Image container
</div>

Common Patterns

Full Screen Container

<div class="w-screen h-dvh bg-white">
  Full screen content
</div>

Constrained Container

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

Image Wrapper

<div class="w-full h-auto">
  <img src="image.jpg" alt="description" class="w-full h-auto object-cover" />
</div>

Video Container

<div class="w-full aspect-video bg-black">
  <video src="video.mp4" class="w-full h-full"></video>
</div>

Sidebar Layout

<div class="flex min-h-screen">
  <aside class="w-64 h-screen overflow-auto">
    Sidebar
  </aside>
  <main class="flex-1">
    Content
  </main>
</div>

References

• Width Documentation
• Height Documentation
• Min-Width Documentation
• Max-Width Documentation
• Min-Height Documentation
• Max-Height Documentation
• Aspect Ratio Documentation