Spacing
Cal.com's spacing system follows the Tailwind spacing scale
Spacing System
Our spacing system follows the Tailwind spacing scale, providing consistent spacing values across the application. Each spacing token can be used with various utility classes:
- Padding:
p-{size}
,px-{size}
,py-{size}
,pt-{size}
,pr-{size}
,pb-{size}
,pl-{size}
- Margin:
m-{size}
,mx-{size}
,my-{size}
,mt-{size}
,mr-{size}
,mb-{size}
,ml-{size}
- Gap:
gap-{size}
,gap-x-{size}
,gap-y-{size}
Hover over each token to copy its utility classes or pixel value.
0 (0px)
px
0.5 (2px)
1 (4px)
1.5 (6px)
2 (8px)
2.5 (10px)
3 (12px)
4 (16px)
5 (20px)
6 (24px)
8 (32px)
9 (36px)
10 (40px)
12 (48px)
14 (56px)
16 (64px)
20 (80px)