Tailwind CSS Sizing Utilities

Comprehensive guide to sizing utilities in Tailwind CSS v4.1, 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 (NEW in v4.1)

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>

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