The spacing tokens follow this structure:
spacing-0
spacing-4
spacing-8
spacing-12
spacing-16
spacing-20
spacing-24
spacing-32
spacing-36
spacing-40
spacing-48
spacing-56
spacing-64
Each value corresponds directly to a pixel value.
Example:
spacing-16 = 16px
spacing-24 = 24px
spacing-32 = 32px
The spacing system is based on a 4px grid, which is standard and works well for interface design.
The values already map almost perfectly to the Tailwind spacing scale used by DaisyUI.
| Current Token | Pixel Value | Tailwind Equivalent |
|---|---|---|
| spacing-0 | 0px | 0 |
| spacing-4 | 4px | 1 |
| spacing-8 | 8px | 2 |
| spacing-12 | 12px | 3 |
| spacing-16 | 16px | 4 |
| spacing-20 | 20px | 5 |
| spacing-24 | 24px | 6 |
| spacing-32 | 32px | 8 |
| spacing-36 | 36px | 9 |
| spacing-40 | 40px | 10 |
| spacing-48 | 48px | 12 |
| spacing-56 | 56px | 14 |
| spacing-64 | 64px | 16 |
The scale itself is correct, but the naming does not align with the vocabulary developers will use in Tailwind and DaisyUI.
For example:
spacing-24
maps to:
p-6
gap-6
mt-6
in Tailwind.
The spacing scale aligns well with Tailwind values but currently uses a custom naming scheme (spacing-16, spacing-24, etc.). Since the project is transitioning to DaisyUI and Tailwind utilities, it would be clearer to adopt Tailwind naming directly rather than maintaining a parallel token naming system. If additional abstraction is needed, it should occur at a semantic layer above the primitive spacing values rather than duplicating the primitive scale.