Spacing & Sizing
Padding, margin, gap, width, and height utilities
OGX uses the standard Tailwind spacing scale:
| Key | Value |
|---|
0 | 0px |
0.5 | 2px |
1 | 4px |
1.5 | 6px |
2 | 8px |
3 | 12px |
4 | 16px |
5 | 20px |
6 | 24px |
8 | 32px |
10 | 40px |
12 | 48px |
16 | 64px |
20 | 80px |
24 | 96px |
32 | 128px |
40 | 160px |
48 | 192px |
56 | 224px |
64 | 256px |
72 | 288px |
80 | 320px |
96 | 384px |
| Class | Description |
|---|
p-{n} | All sides |
px-{n} | Left and right |
py-{n} | Top and bottom |
pt-{n} | Top only |
pr-{n} | Right only |
pb-{n} | Bottom only |
pl-{n} | Left only |
'p-8' // 32px all sides
'px-16' // 64px left and right
'py-4' // 16px top and bottom
'pt-8 pb-4' // 32px top, 16px bottom
| Class | Description |
|---|
m-{n} | All sides |
m-auto | Auto margin |
mx-{n} | Horizontal margin |
mx-auto | Center horizontally |
my-{n} | Vertical margin |
my-auto | Center vertically |
mt-{n} | Top margin |
mr-{n} | Right margin |
mb-{n} | Bottom margin |
ml-{n} | Left margin |
'm-4' // 16px all sides
'mx-auto' // Center horizontally
'mt-8 mb-4' // Different top/bottom
| Class | Description |
|---|
gap-{n} | Gap in all directions |
gap-x-{n} | Column gap only |
gap-y-{n} | Row gap only |
'gap-4' // 16px gap between children
'gap-x-8' // 32px horizontal gap
'gap-y-2' // 8px vertical gap
| Class | Description |
|---|
w-{n} | Fixed width (spacing scale) |
w-full | width: 100% |
w-screen | width: 100vw |
w-auto | width: auto |
w-fit | Width fits content |
w-1/2, w-1/3, etc. | Fractional widths |
| Class | Description |
|---|
min-w-full | min-width: 100% |
max-w-full | max-width: 100% |
max-w-{n} | Fixed max-width |
| Class | Description |
|---|
h-{n} | Fixed height (spacing scale) |
h-full | height: 100% |
h-screen | height: 100vh |
h-auto | height: auto |
h-fit | Height fits content |
| Class | Description |
|---|
min-h-full | min-height: 100% |
max-h-full | max-height: 100% |
Use brackets for custom values:
'p-[32px]' // 32px padding
'w-[300px]' // 300px width
'gap-[1.5rem]' // 1.5rem gap
'm-[10%]' // 10% margin
