Loading…
Loading…
Loading…
CSS clamp() type & spacing scale with Tailwind export
| Step | Min | Max | clamp() |
|---|---|---|---|
| xs | 0.6944rem | 0.8rem | clamp(0.6944rem, 0.1508vw + 0.6643rem, 0.8rem) |
| sm | 0.8333rem | 1rem | clamp(0.8333rem, 0.2381vw + 0.7857rem, 1rem) |
| base | 1rem | 1.25rem | clamp(1rem, 0.3571vw + 0.9286rem, 1.25rem) |
| lg | 1.2rem | 1.5625rem | clamp(1.2rem, 0.5179vw + 1.0964rem, 1.5625rem) |
| xl | 1.44rem | 1.9531rem | clamp(1.44rem, 0.733vw + 1.2934rem, 1.9531rem) |
| 2xl | 1.728rem | 2.4414rem | clamp(1.728rem, 1.0192vw + 1.5242rem, 2.4414rem) |
| 3xl | 2.0736rem | 3.0518rem | clamp(2.0736rem, 1.3974vw + 1.7941rem, 3.0518rem) |
| 4xl | 2.4883rem | 3.8147rem | clamp(2.4883rem, 1.8948vw + 2.1094rem, 3.8147rem) |
| 5xl | 2.986rem | 4.7684rem | clamp(2.986rem, 2.5463vw + 2.4767rem, 4.7684rem) |
:root {
/* Typography */
--font-xs: clamp(0.6944rem, 0.1508vw + 0.6643rem, 0.8rem);
--font-sm: clamp(0.8333rem, 0.2381vw + 0.7857rem, 1rem);
--font-base: clamp(1rem, 0.3571vw + 0.9286rem, 1.25rem);
--font-lg: clamp(1.2rem, 0.5179vw + 1.0964rem, 1.5625rem);
--font-xl: clamp(1.44rem, 0.733vw + 1.2934rem, 1.9531rem);
--font-2xl: clamp(1.728rem, 1.0192vw + 1.5242rem, 2.4414rem);
--font-3xl: clamp(2.0736rem, 1.3974vw + 1.7941rem, 3.0518rem);
--font-4xl: clamp(2.4883rem, 1.8948vw + 2.1094rem, 3.8147rem);
--font-5xl: clamp(2.986rem, 2.5463vw + 2.4767rem, 4.7684rem);
/* Spacing */
--space-3xs: clamp(0.25rem, 0.0893vw + 0.2321rem, 0.3125rem);
--space-2xs: clamp(0.375rem, 0.1339vw + 0.3482rem, 0.4688rem);
--space-xs: clamp(0.5rem, 0.1786vw + 0.4643rem, 0.625rem);
--space-sm: clamp(0.75rem, 0.2679vw + 0.6964rem, 0.9375rem);
--space-md: clamp(1rem, 0.3571vw + 0.9286rem, 1.25rem);
--space-lg: clamp(1.5rem, 0.5357vw + 1.3929rem, 1.875rem);
--space-xl: clamp(2rem, 0.7143vw + 1.8571rem, 2.5rem);
--space-2xl: clamp(3rem, 1.0714vw + 2.7857rem, 3.75rem);
--space-3xl: clamp(4rem, 1.4286vw + 3.7143rem, 5rem);
}