Width, height, and sizing
Sizing utilities control the dimensions of an element. Common examples include w-full, w-1/2, max-w-xl, h-12, min-h-screen, and size-10. size-* sets width and height together, making it useful for square icons or avatars.
A fixed width is often a poor choice for content-heavy cards because text can overflow at narrow viewports. Prefer a responsive combination such as w-full max-w-md, or use grid columns that adapt to the available space. Also understand the difference between w-full (100% of the containing block) and max-w-* (an upper bound).
Use min-h-* when content may grow. A fixed h-* can clip content if the text wraps or the user's font size is larger.
Responsive sizing
<div class="mx-auto w-full max-w-3xl px-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<article class="min-h-40 rounded-xl bg-white p-5 shadow-sm">Tasks completed</article>
<article class="min-h-40 rounded-xl bg-white p-5 shadow-sm">Tasks remaining</article>
</div>
</div>đź’ˇ The container expands to available width while stopping at
max-w-3xl. The grid is one column by default and two columns from the sm breakpoint upward. min-h-40 provides a minimum card height without preventing content from expanding it.Key Takeaways
- Use
max-w-*to control readable line length and page width. - Prefer minimum dimensions for content that may grow.
- Use
size-*for square elements where supported by your Tailwind version.