Size Utilities
- Control width, height, margin and padding with utility classes.
Why Size Utilities Matter in UI Design
Size control is fundamental to:
Layout stability
Responsive design
Component consistency
Preventing overflow and layout breakage
In Tailwind CSS, size utilities are:
Predefined
Predictable
Responsive-friendly
Based on a design scale
Tailwind avoids arbitrary sizing and promotes controlled layouts.
Width Utilities
What Are Width Utilities ?
Width utilities control the horizontal size of an element.
Syntax:
w-{value}
They map directly to:
width: value;
Common Width Classes
Class Meaning w-full 100% width w-auto Auto width w-screen 100vw w-1/2 50% w-1/3 33.33% w-1/4 25% w-fit Fit to content
Basic Tailwind Width
w-full gives 100% width, w-1/2 gives 50% width, and w-64 sets a fixed width (256px) in Tailwind CSS.
<!-- Full Width -->
<div class="w-full bg-gray-200 p-4">
Full width container
</div>
<!-- Half Width -->
<div class="w-1/2 bg-blue-200 p-4">
Half width container
</div>
<!-- Fixed Width -->
<div class="w-64 bg-green-200 p-4">
Fixed width box
</div>This uses Tailwind’s spacing scale instead of pixels.
Height Utilities
What Are Height Utilities ?
Height utilities control the vertical size of an element.
Syntax:
h-{value}
Maps to:
height: value;
Common Height Classes
Class Meaning h-auto Auto height h-full 100% of parent h-screen 100vh h-fit Fit to content
Basic Tailwind Height
h-32 sets a fixed height (8rem ≈ 128px), and h-screen sets the height equal to the full viewport height.
<!-- Fixed Height -->
<div class="h-32 bg-red-200">
Fixed height box
</div>
<!-- Full Viewport Height -->
<div class="h-screen bg-gray-100">
Full viewport height
</div>Min-Width Utilities
What is Min-Width ?
min-width ensures an element never becomes smaller than a certain size.
Syntax:
min-w-{value}
Common Min-Width Classes
Class Meaning min-w-0 Allows shrinking min-w-full At least 100% min-w-fit Fit to content
Minimum Width Button
min-w-[120px] ensures the button keeps at least 120px width and does not become too small.
<button class="min-w-[120px] bg-blue-600 text-white px-4 py-2">
Action
</button>Use cases:
Buttons
Table columns
Cards in grid layouts
Max-Width Utilities
What Is Max-Width ?
max-width limits how wide an element can grow.
Syntax:
max-w-{value}
Common Max-Width Classes
Class Meaning max-w-xs Extra small max-w-sm Small max-w-md Medium max-w-lg Large max-w-xl Extra large max-w-full No limit
Centered Card with Max Width
max-w-md limits the card width, and mx-auto centers it horizontally on the page.
<div class="max-w-md mx-auto bg-white p-6 shadow">
Centered card with max width
</div>This is extremely common in real projects.
Min-Height Utilities
What Is Min-Height ?
min-height ensures an element has at least a certain height, even if content is small.
Syntax:
min-h-{value}
Common Min-Height Classes
Class Meaning min-h-screen At least full viewport min-h-full At least full parent min-h-fit Fit to content
Page Layout with Minimum Full Height
min-h-screen ensures the layout takes at least the full screen height, and flex flex-col arranges content vertically.
<div class="min-h-screen flex flex-col">
Page layout with minimum full height
</div>Used for:
Full-page layouts
Sticky footers
Dashboards
Max-Height Utilities
What Is Max-Height ?
max-height restricts how tall an element can become.
Syntax:
max-h-{value}
Common Max-Height Classes
Class Meaning max-h-64 Fixed max height max-h-screen Max viewport height max-h-full Max parent height
Scrollable Content Box
max-h-64 limits the maximum height and overflow-y-auto adds a vertical scrollbar when content overflows.
<div class="max-h-64 overflow-y-auto border p-4">
Long scrollable content
</div>Used in:
Dropdowns
Modals
Chat windows
Responsive Layout Container
max-w-lg limits the width, min-h-screen ensures full screen height, and mx-auto centers the layout.
<div class="max-w-lg min-h-screen mx-auto bg-gray-50 p-6">
Responsive layout container
</div>This combines:
Max width
Minimum height
Center alignment
Responsive Width
w-full applies on small screens, md:w-1/2 on medium screens, and lg:w-1/3 on large screens.
<div class="w-full md:w-1/2 lg:w-1/3">
Responsive width
</div>This will be covered deeply in responsive lessons.
Best Practices for Size Utilities
Use percentage widths for layouts
Use max-w-* for readable content
Use min-h-screen for page layouts
Use max-h with overflow control
Avoid unnecessary fixed sizes