tailwindcss-sizing

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>

About this skill