Generateur de systeme d'espacement
Construisez une echelle d'espacement coherente a partir d'une unite de base. Generez des echelles lineaires, geometriques ou Fibonacci avec CSS variables et config Tailwind.
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
3.5
14px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
11
44px
| Token | px | rem | Tailwind | Preview |
|---|---|---|---|---|
| 0 | 0 | 0.000 | ||
| 0.5 | 2 | 0.125 | ||
| 1 | 4 | 0.250 | ||
| 1.5 | 6 | 0.375 | ||
| 2 | 8 | 0.500 | ||
| 2.5 | 10 | 0.625 | ||
| 3 | 12 | 0.750 | ||
| 3.5 | 14 | 0.875 | ||
| 4 | 16 | 1.000 | ||
| 5 | 20 | 1.250 | ||
| 6 | 24 | 1.500 | ||
| 7 | 28 | 1.750 | ||
| 8 | 32 | 2.000 | ||
| 9 | 36 | 2.250 | ||
| 10 | 40 | 2.500 | ||
| 11 | 44 | 2.750 |
base: 4px16 tokens
CSS Variables
:root {
--space-0: 0.000rem; /* 0px */
--space-0.5: 0.125rem; /* 2px */
--space-1: 0.250rem; /* 4px */
--space-1.5: 0.375rem; /* 6px */
--space-2: 0.500rem; /* 8px */
--space-2.5: 0.625rem; /* 10px */
--space-3: 0.750rem; /* 12px */
--space-3.5: 0.875rem; /* 14px */
--space-4: 1.000rem; /* 16px */
--space-5: 1.250rem; /* 20px */
--space-6: 1.500rem; /* 24px */
--space-7: 1.750rem; /* 28px */
--space-8: 2.000rem; /* 32px */
--space-9: 2.250rem; /* 36px */
--space-10: 2.500rem; /* 40px */
--space-11: 2.750rem; /* 44px */
}Tailwind Config
// tailwind.config
spacing: {
'0': '0.000rem', /* 0px */
'0.5': '0.125rem', /* 2px */
'1': '0.250rem', /* 4px */
'1.5': '0.375rem', /* 6px */
'2': '0.500rem', /* 8px */
'2.5': '0.625rem', /* 10px */
'3': '0.750rem', /* 12px */
'3.5': '0.875rem', /* 14px */
'4': '1.000rem', /* 16px */
'5': '1.250rem', /* 20px */
'6': '1.500rem', /* 24px */
'7': '1.750rem', /* 28px */
'8': '2.000rem', /* 32px */
'9': '2.250rem', /* 36px */
'10': '2.500rem', /* 40px */
'11': '2.750rem', /* 44px */
}Explorer d'autres Goodies
D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.