Widths, Heights, Max/Min Sizing in Tailwind CSS
Tailwind CSS makes sizing elements flexible and efficient using utility classes for width, height, and their min/max counterparts. These utilities help build fully responsive and adaptive designs.
1. Width Utilities
Control the width of elements using w-* classes:
<div class="w-1/2">50% width</div>
<div class="w-full">100% width</div>
<div class="w-64">Fixed width (16rem)</div>
<div class="w-screen">Full viewport width</div>
2. Height Utilities
Use h-* classes to set height:
<div class="h-16">Fixed height (4rem)</div>
<div class="h-screen">Full screen height</div>
<div class="h-auto">Height adjusts to content</div>
3. Min/Max Width
Tailwind provides min-w-* and max-w-* for responsive constraints:
<div class="min-w-[200px]">Minimum 200px width</div>
<div class="max-w-md">Maximum medium width (28rem)</div>
4. Min/Max Height
Use min-h-* and max-h-* to control vertical sizing:
<div class="min-h-screen">Full height on small screens</div>
<div class="max-h-60 overflow-y-auto">Scroll when content exceeds 15rem</div>
5. Responsive Sizing
Combine breakpoints to adjust widths and heights on different screen sizes:
<div class="w-full md:w-1/2 lg:w-1/3">
Responsive width on different devices
</div>
Conclusion
Sizing utilities in Tailwind CSS empower you to control dimensions responsively without custom CSS. They’re powerful for both fixed and fluid layouts.