CChitragupt
/
/
Review 3AK
Tailwind CSS
v4 · 22 palettes, spacing, radius, type
Material UI
v6 · palette, typography, shape
shadcn/ui
CSS variables, radius
Chakra UI
v3 · semantic tokens
Radix Colors
12-step scales
Bootstrap
5.3 · Sass variables
Material Design 3
dynamic colour roles
Upload tokens
W3C JSON, Figma variables
242
colours
35
spacing
9
radius
13
type sizes
7
shadows
How should they come in
Map to my tokens where they match · AI
41 of your 62 tokens match a Tailwind value. The rest are added under tw-.
Add as a separate set
Nothing of yours changes.
Replace my tokens
Every element moves to the nearest Tailwind value. Verify will show the drift.
Preview of the mapping · 5 of 62
| ink-3 | #6B7280 | → | gray-500 | #6B7280 | exact |
| brand-500 | #059669 | → | emerald-600 | #059669 | exact |
| radius-lg | 16px | → | rounded-2xl | 16px | exact |
| space-3 | 12px | → | 3 | 12px | exact |
| danger | #E11D48 | → | rose-600 | #E11D48 | exact |