Width Height Min Max in TailwindCSS
? Width, Height, Min & Max Utilities in Tailwind CSS
Tailwind provides easy-to-use utilities to control the width, height, minimum, and maximum sizes of elements.
1. Width (w-*)
Set element width with fixed sizes, percentages, fractions, and full.
| Class | CSS Equivalent | Description |
|---|---|---|
w-0 | width: 0; | Zero width |
w-1 to w-64 | width: 0.25rem to 16rem | Fixed widths (4px to 256px) |
w-auto | width: auto; | Default width |
w-px | width: 1px; | 1 pixel width |
w-full | width: 100%; | Full width of parent |
w-screen | width: 100vw; | Full viewport width |
w-1/2, w-1/3, w-2/3, w-1/4, ... | width: 50%; 33.333%; etc. | Fractional widths |
2. Height (h-*)
Set element height similarly.
| Class | CSS Equivalent | Description |
|---|---|---|
h-0 | height: 0; | Zero height |
h-1 to h-64 | height: 0.25rem to 16rem | Fixed heights (4px to 256px) |
h-auto | height: auto; | Default height |
h-px | height: 1px; | 1 pixel height |
h-full | height: 100%; | Full height of parent |
h-screen | height: 100vh; | Full viewport height |
3. Min-Width (min-w-*)
Set the minimum width to prevent shrinking.
| Class | CSS Equivalent | Description |
|---|---|---|
min-w-0 | min-width: 0; | Minimum width zero |
min-w-full | min-width: 100%; | Minimum width full parent |
min-w-min | min-width: min-content; | Minimum content width |
min-w-max | min-width: max-content; | Maximum content width |
4. Min-Height (min-h-*)
| Class | CSS Equivalent | Description |
|---|---|---|
min-h-0 | min-height: 0; | Minimum height zero |
min-h-full | min-height: 100%; | Minimum height full parent |
min-h-screen | min-height: 100vh; | Minimum height viewport |
5. Max-Width (max-w-*)
Control maximum element width.
| Class | CSS Equivalent | Description |
|---|---|---|
max-w-xs | max-width: 20rem; (320px) | Extra small max width |
max-w-sm | max-width: 24rem; (384px) | Small max width |
max-w-md | max-width: 28rem; (448px) | Medium max width |
max-w-lg | max-width: 32rem; (512px) | Large max width |
max-w-xl | max-width: 36rem; (576px) | Extra large max width |
max-w-2xl | max-width: 42rem; (672px) | 2XL max width |
max-w-full | max-width: 100%; | Full width |
max-w-none | max-width: none; | No max width |
6. Max-Height (max-h-*)
Control maximum height.
| Class | CSS Equivalent | Description |
|---|---|---|
max-h-0 | max-height: 0; | Zero max height |
max-h-full | max-height: 100%; | Max height full parent |
max-h-screen | max-height: 100vh; | Max height viewport |
Example Usage
<div class="w-1/2 h-64 bg-blue-200 p-4"> <p>Width 50% of parent, fixed height 16rem (256px).</p></div><div class="min-w-full max-w-lg bg-green-200 p-4 mt-4"> <p>Minimum full width but max 32rem width.</p></div>If you'd like, I can provide responsive width/height examples or explain custom sizes via Tailwind config!
