Tailwind CSS
Sizing: Width, Height & Min/Max
Mastering Sizing Utilities in Tailwind CSS
Controlling the dimensions of elements is fundamental to web design. Tailwind CSS provides a comprehensive set of utilities for managing width, height, minimum and maximum sizes, and aspect ratios. Understanding these utilities will give you precise control over your layouts.
Width Utilities
Tailwind offers multiple ways to control an element's width, from fixed values to fluid percentages:
Fixed Width Values
<!-- Fixed widths using spacing scale -->
<div class="w-0">Width 0</div>
<div class="w-1">Width 0.25rem (4px)</div>
<div class="w-4">Width 1rem (16px)</div>
<div class="w-8">Width 2rem (32px)</div>
<div class="w-12">Width 3rem (48px)</div>
<div class="w-16">Width 4rem (64px)</div>
<div class="w-24">Width 6rem (96px)</div>
<div class="w-32">Width 8rem (128px)</div>
<div class="w-48">Width 12rem (192px)</div>
<div class="w-64">Width 16rem (256px)</div>
<div class="w-96">Width 24rem (384px)</div>
<!-- Single pixel width -->
<div class="w-px">Width 1px</div>
Fixed vs Fluid: Fixed width utilities (w-4, w-8, etc.) are great for icons, buttons, and elements that should maintain consistent sizes. Use fluid widths for responsive layouts that adapt to screen size.
Percentage-Based Widths
Tailwind provides fraction-based width utilities that translate to percentages:
Fractional Widths
<!-- Full width -->
<div class="w-full">100% width</div>
<!-- Half width -->
<div class="w-1/2">50% width</div>
<!-- Third widths -->
<div class="w-1/3">33.333% width</div>
<div class="w-2/3">66.666% width</div>
<!-- Quarter widths -->
<div class="w-1/4">25% width</div>
<div class="w-2/4">50% width (same as w-1/2)</div>
<div class="w-3/4">75% width</div>
<!-- Fifth widths -->
<div class="w-1/5">20% width</div>
<div class="w-2/5">40% width</div>
<div class="w-3/5">60% width</div>
<div class="w-4/5">80% width</div>
<!-- Sixth widths -->
<div class="w-1/6">16.666% width</div>
<div class="w-5/6">83.333% width</div>
<!-- Twelfth widths (12-column grid) -->
<div class="w-1/12">8.333% width</div>
<div class="w-2/12">16.666% width</div>
<div class="w-3/12">25% width</div>
<div class="w-4/12">33.333% width</div>
<div class="w-6/12">50% width</div>
<div class="w-8/12">66.666% width</div>
<div class="w-9/12">75% width</div>
<div class="w-11/12">91.666% width</div>
Practical Layout Example
<!-- Two-column layout -->
<div class="flex gap-4">
<div class="w-2/3 bg-blue-100 p-4">
Main content (66.666%)
</div>
<div class="w-1/3 bg-gray-100 p-4">
Sidebar (33.333%)
</div>
</div>
<!-- Three-column grid -->
<div class="flex gap-4">
<div class="w-1/3 bg-blue-100 p-4">Column 1</div>
<div class="w-1/3 bg-blue-100 p-4">Column 2</div>
<div class="w-1/3 bg-blue-100 p-4">Column 3</div>
</div>
<!-- Dashboard layout with sidebar -->
<div class="flex">
<aside class="w-64 bg-gray-800 text-white p-4">
Fixed width sidebar (256px)
</aside>
<main class="w-full bg-white p-8">
Fluid main content
</main>
</div>
Viewport and Screen-Based Widths
Special Width Values
<!-- Screen width (100vw) -->
<div class="w-screen">Full viewport width</div>
<!-- Min and max content -->
<div class="w-min">Width based on minimum content</div>
<div class="w-max">Width based on maximum content</div>
<div class="w-fit">Width fits content</div>
<!-- Auto width -->
<div class="w-auto">Automatic width</div>
<!-- Practical example: Hero section -->
<section class="w-screen bg-gradient-to-r from-blue-500 to-purple-600">
<div class="max-w-7xl mx-auto px-4 py-16">
<h1 class="text-4xl font-bold text-white">Full-width hero</h1>
</div>
</section>
w-screen vs w-full:
w-screen (100vw) makes an element the full viewport width, which can cause horizontal scrolling if there's a vertical scrollbar. w-full (100%) is usually safer as it respects the parent's width.
Maximum Width Utilities
Maximum width utilities are essential for creating readable, centered content areas:
Max-Width Values
<!-- Preset max-widths for content containers -->
<div class="max-w-xs">Max-width 20rem (320px)</div>
<div class="max-w-sm">Max-width 24rem (384px)</div>
<div class="max-w-md">Max-width 28rem (448px)</div>
<div class="max-w-lg">Max-width 32rem (512px)</div>
<div class="max-w-xl">Max-width 36rem (576px)</div>
<div class="max-w-2xl">Max-width 42rem (672px)</div>
<div class="max-w-3xl">Max-width 48rem (768px)</div>
<div class="max-w-4xl">Max-width 56rem (896px)</div>
<div class="max-w-5xl">Max-width 64rem (1024px)</div>
<div class="max-w-6xl">Max-width 72rem (1152px)</div>
<div class="max-w-7xl">Max-width 80rem (1280px)</div>
<!-- Special max-width values -->
<div class="max-w-none">No max-width constraint</div>
<div class="max-w-full">Max-width 100%</div>
<div class="max-w-min">Max-width minimum content</div>
<div class="max-w-max">Max-width maximum content</div>
<div class="max-w-fit">Max-width fit content</div>
<div class="max-w-prose">Max-width 65ch (optimal reading width)</div>
<div class="max-w-screen-sm">Max-width 640px</div>
<div class="max-w-screen-md">Max-width 768px</div>
<div class="max-w-screen-lg">Max-width 1024px</div>
<div class="max-w-screen-xl">Max-width 1280px</div>
<div class="max-w-screen-2xl">Max-width 1536px</div>
Centered Content Containers
<!-- Blog post layout -->
<article class="max-w-prose mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-4">Article Title</h1>
<p class="mb-4">
Optimal line length for reading is around 65 characters.
The max-w-prose utility achieves this automatically.
</p>
</article>
<!-- Application layout -->
<div class="max-w-7xl mx-auto px-4">
<header class="py-6">Navigation</header>
<main class="py-12">Main content</main>
<footer class="py-8">Footer</footer>
</div>
<!-- Card in centered container -->
<div class="max-w-md mx-auto">
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold mb-2">Card Title</h3>
<p>Card content with constrained width</p>
</div>
</div>
max-w-prose for Readability: The
max-w-prose utility sets a max-width of 65ch (65 characters), which is considered optimal for reading long-form text. Use it for articles, blog posts, and documentation.
Minimum Width Utilities
Min-Width Values
<!-- Minimum width constraints -->
<div class="min-w-0">Min-width 0</div>
<div class="min-w-full">Min-width 100%</div>
<div class="min-w-min">Min-width minimum content</div>
<div class="min-w-max">Min-width maximum content</div>
<div class="min-w-fit">Min-width fit content</div>
<!-- Practical example: Button with minimum width -->
<button class="min-w-32 px-4 py-2 bg-blue-500 text-white rounded">
OK
</button>
<!-- Table cell with minimum width -->
<table>
<tr>
<td class="min-w-48">Name</td>
<td>John Doe</td>
</tr>
</table>
<!-- Form input with minimum width -->
<input type="text" class="min-w-64 px-3 py-2 border rounded" placeholder="Enter text">
Height Utilities
Height utilities work identically to width utilities:
Fixed Height Values
<!-- Fixed heights using spacing scale -->
<div class="h-0">Height 0</div>
<div class="h-1">Height 0.25rem (4px)</div>
<div class="h-4">Height 1rem (16px)</div>
<div class="h-8">Height 2rem (32px)</div>
<div class="h-12">Height 3rem (48px)</div>
<div class="h-16">Height 4rem (64px)</div>
<div class="h-24">Height 6rem (96px)</div>
<div class="h-32">Height 8rem (128px)</div>
<div class="h-48">Height 12rem (192px)</div>
<div class="h-64">Height 16rem (256px)</div>
<div class="h-96">Height 24rem (384px)</div>
<!-- Single pixel height -->
<div class="h-px">Height 1px</div>
Percentage and Viewport Heights
<!-- Percentage heights -->
<div class="h-full">100% height</div>
<div class="h-1/2">50% height</div>
<div class="h-1/3">33.333% height</div>
<div class="h-2/3">66.666% height</div>
<div class="h-1/4">25% height</div>
<div class="h-3/4">75% height</div>
<!-- Viewport height -->
<div class="h-screen">Full viewport height (100vh)</div>
<!-- Auto and special values -->
<div class="h-auto">Automatic height</div>
<div class="h-min">Minimum content height</div>
<div class="h-max">Maximum content height</div>
<div class="h-fit">Fit content height</div>
<!-- Practical examples -->
<!-- Full-height hero section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-b from-blue-500 to-blue-700">
<div class="text-center text-white">
<h1 class="text-5xl font-bold mb-4">Welcome</h1>
<p class="text-xl">Full viewport height hero</p>
</div>
</section>
<!-- Sidebar with full height -->
<div class="flex">
<aside class="w-64 h-screen bg-gray-800 text-white">
Fixed height sidebar
</aside>
<main class="flex-1">Main content</main>
</div>
<!-- Image with fixed aspect ratio -->
<div class="w-full h-64 bg-gray-200">
<img src="image.jpg" class="w-full h-full object-cover" alt="Cover image">
</div>
Maximum and Minimum Height
Max-Height Utilities
<!-- Maximum height constraints -->
<div class="max-h-0">Max-height 0</div>
<div class="max-h-1">Max-height 0.25rem</div>
<div class="max-h-full">Max-height 100%</div>
<div class="max-h-screen">Max-height 100vh</div>
<div class="max-h-min">Max-height minimum content</div>
<div class="max-h-max">Max-height maximum content</div>
<div class="max-h-fit">Max-height fit content</div>
<!-- Scrollable container with max height -->
<div class="max-h-96 overflow-y-auto bg-gray-100 p-4">
<p>Long content that scrolls...</p>
<p>More content...</p>
<p>Even more content...</p>
</div>
<!-- Dropdown menu with max height -->
<div class="max-h-64 overflow-y-auto bg-white shadow-lg rounded">
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 1</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 2</a>
<!-- More options... -->
</div>
Min-Height Utilities
<!-- Minimum height constraints -->
<div class="min-h-0">Min-height 0</div>
<div class="min-h-full">Min-height 100%</div>
<div class="min-h-screen">Min-height 100vh</div>
<div class="min-h-min">Min-height minimum content</div>
<div class="min-h-max">Min-height maximum content</div>
<div class="min-h-fit">Min-height fit content</div>
<!-- Full-height page layout -->
<div class="min-h-screen flex flex-col">
<header class="bg-white shadow py-4">Header</header>
<main class="flex-1 bg-gray-50 py-8">
Main content grows to fill space
</main>
<footer class="bg-gray-800 text-white py-4">Footer</footer>
</div>
<!-- Card with minimum height -->
<div class="min-h-64 bg-white rounded-lg shadow p-6">
Content that should be at least 256px tall
</div>
Percentage Heights Require Parent Height: For percentage-based heights (h-full, h-1/2) to work, the parent element must have a defined height. Use viewport heights (h-screen) or fixed heights on parents when necessary.
Size Utilities (Width and Height Together)
Tailwind provides shorthand utilities to set both width and height at once:
Size Shorthand
<!-- Square elements with size utility -->
<div class="size-4">16x16px square</div>
<div class="size-8">32x32px square</div>
<div class="size-12">48x48px square</div>
<div class="size-16">64x64px square</div>
<div class="size-24">96x96px square</div>
<div class="size-32">128x128px square</div>
<!-- Icon containers -->
<div class="size-10 bg-blue-500 rounded flex items-center justify-center">
<svg class="size-6 text-white" fill="currentColor">
<!-- Icon path -->
</svg>
</div>
<!-- Avatar -->
<img src="avatar.jpg" class="size-12 rounded-full" alt="User avatar">
<!-- Square buttons -->
<button class="size-10 bg-gray-200 rounded hover:bg-gray-300">
X
</button>
Aspect Ratio Utilities
Control the aspect ratio of elements to maintain proportions:
Aspect Ratio Values
<!-- Square aspect ratio (1:1) -->
<div class="aspect-square bg-blue-100">
Always square
</div>
<!-- Video aspect ratio (16:9) -->
<div class="aspect-video bg-black">
<iframe src="video.mp4" class="w-full h-full"></iframe>
</div>
<!-- Auto aspect ratio -->
<div class="aspect-auto">Natural aspect ratio</div>
<!-- Practical examples -->
<!-- Responsive video embed -->
<div class="aspect-video w-full">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
class="w-full h-full"
allowfullscreen
></iframe>
</div>
<!-- Product image grid with consistent aspect ratios -->
<div class="grid grid-cols-3 gap-4">
<div class="aspect-square bg-gray-200 rounded overflow-hidden">
<img src="product1.jpg" class="w-full h-full object-cover" alt="Product 1">
</div>
<div class="aspect-square bg-gray-200 rounded overflow-hidden">
<img src="product2.jpg" class="w-full h-full object-cover" alt="Product 2">
</div>
<div class="aspect-square bg-gray-200 rounded overflow-hidden">
<img src="product3.jpg" class="w-full h-full object-cover" alt="Product 3">
</div>
</div>
<!-- Profile image with square aspect -->
<div class="aspect-square w-32 rounded-full overflow-hidden">
<img src="profile.jpg" class="w-full h-full object-cover" alt="Profile">
</div>
Aspect Ratio + Object Fit: Combine
aspect-ratio utilities with object-cover or object-contain to control how images fill their containers while maintaining the aspect ratio.
Practical Sizing Patterns
Dashboard Layout
<div class="min-h-screen flex">
<!-- Fixed-width sidebar -->
<aside class="w-64 bg-gray-900 text-white">
<div class="p-4">
<h2 class="text-xl font-bold mb-4">Menu</h2>
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Users</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Settings</a>
</nav>
</div>
</aside>
<!-- Fluid main content -->
<div class="flex-1 flex flex-col">
<!-- Fixed-height header -->
<header class="h-16 bg-white shadow flex items-center px-6">
<h1 class="text-2xl font-bold">Dashboard</h1>
</header>
<!-- Scrollable content area -->
<main class="flex-1 overflow-y-auto bg-gray-50 p-6">
<div class="max-w-7xl mx-auto">
<!-- Content goes here -->
</div>
</main>
</div>
</div>
Card Grid with Consistent Sizing
<div class="max-w-6xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="aspect-video bg-gray-200">
<img src="image1.jpg" class="w-full h-full object-cover" alt="Card 1">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Card Title</h3>
<p class="text-gray-600">Card description...</p>
</div>
</div>
<!-- More cards... -->
</div>
</div>
Exercise 1: Create a Profile Card
Build a user profile card with:
- A square avatar image (size-24 or size-32) centered at the top
- Name and title below the avatar
- Stats section with three columns of equal width
- Bio section with max-w-prose for readability
- Action buttons at the bottom with minimum width
- Entire card with max-w-md and centered with mx-auto
Exercise 2: Build a Video Gallery
Create a responsive video gallery with:
- Container with max-w-6xl centered on the page
- Grid of video thumbnails (3 columns on desktop)
- Each video thumbnail with aspect-video ratio
- Play button overlay centered on each thumbnail
- Video title below each thumbnail
Exercise 3: Design a Full-Height Landing Page
Create a landing page with:
- Hero section with h-screen and centered content
- Features section with max-w-7xl centered container
- Three feature cards with w-1/3 each
- Each card with a fixed-height image (h-48) at the top
- Footer with full width and min-h-64
Best Practices for Sizing
Sizing Guidelines:
- Use max-width for containers: Combine max-w-* with mx-auto for centered, responsive layouts
- min-h-screen for full pages: Use on the root container to ensure the page fills the viewport
- Aspect ratios for media: Use aspect-video or aspect-square to maintain consistent proportions
- Fixed widths for sidebars: Use w-64 or similar for navigation sidebars that should stay consistent
- Fluid widths for content: Use w-full or fractional widths for main content areas
- Size utility for icons: Use size-* for square icons and buttons for cleaner code
- max-h with overflow: Combine max-h-* with overflow-y-auto for scrollable areas
Summary
In this lesson, you've mastered:
- Width utilities: fixed (w-4, w-8), percentage (w-1/2, w-full), viewport (w-screen)
- Height utilities: fixed (h-4, h-8), percentage (h-1/2, h-full), viewport (h-screen)
- Maximum width: max-w-xs through max-w-7xl, max-w-prose, max-w-screen-*
- Maximum height: max-h-* values for constraining height
- Minimum dimensions: min-w-* and min-h-* for setting lower bounds
- Size shorthand: size-* for square elements
- Aspect ratio utilities: aspect-square, aspect-video, aspect-auto
- Practical patterns for common layouts
With precise control over element sizing, you can now create flexible, responsive layouts. In the next lesson, we'll explore Flexbox utilities for arranging and aligning elements.