Design Tokens

Naming and scaling design tokens in Tailwind CSS v4: tight token sets, two-tier sizing, multi-namespace naming, spacing architecture, z-index scales, display scaling, and token linting.

A token system is a set of decisions you only have to make once — provided the names hold up as the codebase grows. These pages cover keeping a token set deliberately small, two-tier sizing, multi-namespace naming, application spacing architecture, z-index scales, display scaling, and linting tokens in a Tailwind CSS v4 project.