Tailwind CSS Colors & Spacing Sizing Utilities: Width, Height, Min/Max Constraints

Tailwind CSS Beginner 1 min read

Sizing Utilities: Width, Height, Min/Max Constraints

Width utilities in Tailwind cover fixed sizes (w-4=1rem, w-64=16rem), fractional percentages (w-1/2, w-1/3, w-2/3, w-1/4, w-3/4), full-width (w-full), viewport width (w-screen), and intrinsic sizing (w-auto, w-fit, w-min, w-max). The max-w-* utilities (max-w-xs through max-w-screen-2xl) constrain maximum width, essential for readable line lengths in text content and for centering layouts. Height utilities follow the same pattern: h-* for fixed heights, h-full (100% of parent), h-screen (100vh), h-dvh (dynamic viewport height for mobile browsers), h-svh, h-lvh. The min-h-* utilities (min-h-0, min-h-full, min-h-screen, min-h-dvh) are important for ensuring containers fill available space in flex column layouts without collapsing. max-h-* constrains height for scrollable containers. The size-* utility (introduced in Tailwind v3.4) applies equal width and height in one class: size-8 sets both width and height to 2rem, perfect for icons, avatars, and square buttons. Before size-*, developers used w-8 h-8 — the size-* shorthand keeps class lists shorter and more readable. It supports the full spacing scale and fractional values just like w-* and h-*.

Example

<!-- Fixed sizes: useful for icons, avatars, buttons -->
<img src="avatar.jpg" alt="" class="w-10 h-10 rounded-full object-cover" />
<!-- Tailwind v3.4+ shorthand: -->
<img src="avatar.jpg" alt="" class="size-10 rounded-full object-cover" />

<!-- Fractional widths in flex layout -->
<div class="flex gap-4">
  <div class="w-1/3 bg-blue-50 p-4 rounded">One third</div>
  <div class="w-2/3 bg-blue-100 p-4 rounded">Two thirds</div>
</div>

<!-- Max-width for readable content -->
<p class="max-w-prose text-gray-700 leading-7">
  The max-w-prose utility sets max-width: 65ch — the classic measure
  for readable line length. Perfect for body text.
</p>

<!-- Container pattern with max-width breakpoints -->
<div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  Page content
</div>

<!-- Full-height layouts -->
<div class="flex flex-col min-h-screen">
  <header class="h-16 bg-white shadow shrink-0">Header</header>
  <main class="flex-1 bg-gray-50 p-6">Grows to fill space</main>
  <footer class="h-12 bg-gray-800 text-white shrink-0">Footer</footer>
</div>

<!-- Scrollable side panel with max-height -->
<aside class="w-64 max-h-[calc(100vh-4rem)] overflow-y-auto sticky top-16">
  Scrollable sidebar content
</aside>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned