Back to categories

Sizing

Utilities for controlling the width and height of elements. Proper sizing is essential for responsive layouts, ensuring content fits appropriately within its container and adapts to different screen sizes. In Tailwind v4, sizing utilities have been enhanced with more logical values and better integration with container queries.

6 utilitiessizing
Official Documentation

Width

Controls the width of an element. Width utilities provide a comprehensive system for sizing elements, from fixed pixel widths to percentage-based and viewport-relative values. These utilities form the foundation of responsive layouts, allowing elements to appropriately scale and adapt to different screen sizes.

<div class="space-y-4"> <div class="w-full bg-blue-100 p-2">w-full (100% width)</div> <div class="w-1/2 bg-blue-200 p-2">w-1/2 (50% width)</div> <div class="w-1/3 bg-blue-300 p-2">w-1/3 (33.333% width)</div> <div class="w-1/4 bg-blue-400 p-2">w-1/4 (25% width)</div> <div class="w-1/5 bg-blue-500 p-2 text-white">w-1/5 (20% width)</div> </div>
1 variant5 examples
0px0.5+64
View details

Min-Width

Sets the minimum width an element can have, preventing it from becoming narrower than the specified value. Min-width is essential for responsive design, ensuring elements maintain usability and readability even on small screens or when their container is resized. In Tailwind v4, min-width utilities have enhanced compatibility with flexbox and grid layouts.

<div class="flex flex-wrap gap-4"> <div class="min-w-0 bg-blue-100 p-2 truncate">min-w-0 (shrink to 0 if needed, with text truncation)</div> <div class="min-w-full bg-blue-200 p-2">min-w-full (minimum 100% width of parent)</div> <div class="min-w-[200px] bg-blue-300 p-2">min-w-[200px] (custom minimum width)</div> </div>
1 variant4 examples
0fullmin+2
View details

Max-Width

Sets the maximum width an element can have, preventing it from growing beyond the specified value. Max-width is fundamental to creating responsive designs that maintain readability and aesthetics across different screen sizes. It's particularly useful for constraining content width for optimal readability on larger screens. In Tailwind v4, max-width utilities have enhanced compatibility with container queries.

<div class="space-y-4"> <div class="max-w-xs bg-blue-100 p-2">max-w-xs (20rem / 320px max width)</div> <div class="max-w-sm bg-blue-200 p-2">max-w-sm (24rem / 384px max width)</div> <div class="max-w-md bg-blue-300 p-2">max-w-md (28rem / 448px max width)</div> <div class="max-w-lg bg-blue-400 p-2 text-white">max-w-lg (32rem / 512px max width)</div> <div class="max-w-xl bg-blue-500 p-2 text-white">max-w-xl (36rem / 576px max width)</div> </div>
1 variant5 examples
0nonexs+20
View details

Height

Controls the height of an element. Height utilities let you set fixed, percentage-based, or content-based heights for elements. While it's generally best to let content determine height in responsive design, these utilities are essential when you need precise vertical control, such as for fixed-height containers, equal-height cards, or viewport-relative sizing.

<div class="flex gap-4 items-end h-40 bg-gray-100 p-4"> <div class="h-full bg-blue-100 p-2">h-full (100% of parent)</div> <div class="h-1/2 bg-blue-200 p-2">h-1/2 (50% of parent)</div> <div class="h-1/4 bg-blue-300 p-2">h-1/4 (25% of parent)</div> <div class="h-16 bg-blue-400 p-2 text-white">h-16 (4rem / 64px)</div> <div class="h-auto bg-blue-500 p-2 text-white">h-auto (content height)</div> </div>
1 variant5 examples
0px0.5+53
View details

Min-Height

Sets the minimum height an element can have, ensuring it doesn't become shorter than the specified value. Min-height is essential for responsive designs where you need to establish a baseline height for elements regardless of their content. This is particularly useful for maintaining the visual integrity of UI components when content is sparse.

<div class="space-y-4"> <div class="min-h-0 bg-blue-100 p-2">min-h-0 (no minimum height)</div> <div class="min-h-full bg-blue-200 p-2">min-h-full (100% of parent's height, if parent has explicit height)</div> <div class="min-h-screen bg-blue-300 p-2">min-h-screen (100vh, full viewport height)</div> <div class="min-h-[200px] bg-blue-400 p-2 text-white">min-h-[200px] (custom minimum height)</div> </div>
1 variant4 examples
0fullscreen+3
View details

Max-Height

Sets the maximum height an element can have, preventing it from growing beyond the specified value. Max-height is crucial for controlling content overflow and maintaining consistent layouts regardless of content length. It's commonly used for creating scrollable sections, constraining tall elements, and ensuring elements fit properly within their container.

<div class="space-y-4"> <div class="max-h-40 overflow-auto bg-blue-100 p-4 rounded"> <p class="mb-2">This content is in a container with max-h-40 (10rem / 160px).</p> <p class="mb-2">When content exceeds this height, scrolling is enabled with overflow-auto.</p> <p class="mb-2">This ensures the container never exceeds its maximum height.</p> <p class="mb-2">Additional content to demonstrate scrolling behavior.</p> <p class="mb-2">More content to make sure scrolling is visible.</p> <p>Even more content for scrolling purposes.</p> </div> <div class="max-h-full bg-blue-200 p-4 rounded"> <p>max-h-full (100% of parent's height if parent has explicit height)</p> </div> <div class="max-h-screen bg-blue-300 p-4 rounded"> <p>max-h-screen (100vh, full viewport height)</p> </div> </div>
1 variant4 examples
0nonefull+4
View details