Width & Height
Width
Tailwind ផ្តល់ width utilities សម្រាប់កំណត់ទទឹង elements រួមមាន fixed widths, percentages, និង responsive widths។
📏 Fixed Width Scale
| Class | Size (rem) | Size (px) | Common Use |
|---|---|---|---|
w-16 |
4rem | 64px | Small icons, avatars |
w-32 |
8rem | 128px | Medium images |
w-48 |
12rem | 192px | Sidebars, cards |
w-64 |
16rem | 256px | Wide sidebars |
w-96 |
24rem | 384px | Large panels |
📊 Percentage Width (Fractions)
| Class | Width | Percentage | Use Case |
|---|---|---|---|
w-full |
100% | Full width | Full-width containers |
w-1/2 |
50% | Half width | Two-column layout |
w-1/3 |
33.333333% | One third | Three-column layout |
w-2/3 |
66.666667% | Two thirds | Main content area |
w-1/4 |
25% | Quarter width | Four-column layout |
w-3/4 |
75% | Three quarters | Main content with sidebar |
w-1/5 |
20% | One fifth | Five-column grid |
w-4/5 |
80% | Four fifths | Large main content |
w-11/12 |
91.666667% | Nearly full | Almost full width with gap |
📐 Height
| Class | Size (rem) | Size (px) | Use Case |
|---|---|---|---|
h-12 |
3rem | 48px | Buttons, inputs |
h-16 |
4rem | 64px | Headers |
h-24 |
6rem | 96px | Large headers |
h-32 |
8rem | 128px | Hero sections |
h-48 |
12rem | 192px | Large images |
🌐 Special Sizes
| Class | CSS Value | Description |
|---|---|---|
w-screen |
width: 100vw; |
Full viewport width |
h-screen |
height: 100vh; |
Full viewport height |
w-auto |
width: auto; |
Auto width (content-based) |
h-auto |
height: auto; |
Auto height (content-based) |
Min & Max Sizes
Max/min width និង height utilities សម្រាប់ constraints។
📦 Max Width
| Class | Size (rem) | Size (px) | Use Case |
|---|---|---|---|
max-w-xs |
20rem | 320px | Small cards, sidebars |
max-w-sm |
24rem | 384px | Medium cards |
max-w-md |
28rem | 448px | Forms, modals |
max-w-lg |
32rem | 512px | Large forms |
max-w-xl |
36rem | 576px | Content containers |
max-w-2xl |
42rem | 672px | Article content |
max-w-4xl |
56rem | 896px | Wide content |
max-w-7xl |
80rem | 1280px | Maximum container |
max-w-full |
100% | - | Full width but no larger |
📌 Min Width
| Class | CSS Value | Use Case |
|---|---|---|
min-w-0 |
min-width: 0; |
Allow shrinking to 0 |
min-w-full |
min-width: 100%; |
Never smaller than parent |
min-w-max |
min-width: max-content; |
Width of longest content |
min-w-min |
min-width: min-content; |
Width of shortest content |
📏 Max & Min Height
| Class | Size | Use Case |
|---|---|---|
max-h-24 |
6rem (96px) | Scrollable dropdowns |
max-h-32 |
8rem (128px) | Limited height containers |
max-h-48 |
12rem (192px) | Medium scrollable areas |
max-h-screen |
100vh | Full screen modals |
min-h-0 |
0 | Allow shrinking |
min-h-full |
100% | Fill parent height |
min-h-screen |
100vh | Full viewport height minimum |
🎯 Common Sizing Patterns
| Pattern | Classes | Result |
|---|---|---|
| Centered Container | max-w-4xl mx-auto |
Centered, max 896px wide |
| Full Height Page | min-h-screen |
At least full viewport height |
| Responsive Image | w-full h-auto |
Fluid, maintains aspect ratio |
| Square Element | w-16 h-16 |
Perfect 64x64px square |
| Sidebar Layout | w-64 min-h-screen |
Fixed-width, full-height sidebar |