Min and Max Constraints
Prevent elements from getting too small or too large using min-w-*, max-w-*, min-h-*, and max-h-* utilities.
Why Size Constraints Matter
Fixed widths and heights break at extreme viewport sizes — too narrow and content squishes, too wide and text becomes unreadable. CSS min/max properties solve this by setting guardrails: an element can be flexible within a range but never goes beyond the set bounds. Tailwind's min-w-*, max-w-*, min-h-*, and max-h-* utilities put these guardrails in place with simple class names.
<!-- Button that never shrinks below 120px or grows past 300px -->
<button class="min-w-[120px] max-w-xs bg-blue-500 text-white px-4 py-2 rounded">
Constrained Button
</button>min-w-* Utilities
min-w-* prevents an element from becoming narrower than the specified value. Tailwind provides min-w-0 (very common in flex contexts), min-w-full, min-w-min, min-w-max, and min-w-fit. The most important is min-w-0, which allows flex or grid children to shrink below their natural content width — a fix for many layout overflow bugs.
<!-- Without min-w-0, long text overflows the flex container -->
<div class="flex gap-3 p-4 border rounded">
<div class="w-10 h-10 shrink-0 bg-indigo-400 rounded-full"></div>
<!-- min-w-0 allows text truncation inside flex child -->
<div class="min-w-0">
<p class="font-semibold truncate">Very Long Username That Would Overflow Without min-w-0</p>
<p class="text-sm text-gray-500">Online</p>
</div>
</div>All lessons in this course
- Width Utilities
- Height Utilities
- Min and Max Constraints
- Aspect Ratio