Why CSS custom properties
This is a spec: descriptive guidance, not a checkable rule. It carries no forbidden and instead pair, and no jig check detector applies to it directly.
The spec
They are the only token format every web framework consumes natively with no build step.
| Consumer | Usage |
|---|---|
| Plain CSS / any framework | color: var(--color-text-strong) |
| Tailwind v4 | @import the barrel flat, alongside @import "tailwindcss" — see Colour architecture. Utility classes are opt-in and need an alias block |
| CSS-in-JS (styled-components, emotion) | color: var(--color-text-strong) inside template literals |
| Vue / Svelte / Angular | Identical to plain CSS, scoped or global |
| React inline styles | style={{ color: 'var(--color-text-strong)' }} |
Boundary: this does not cover React Native or native platforms, which cannot read CSS. If a non-web target enters scope, author in DTCG JSON and generate these files with Style Dictionary or Terrazzo. The naming contract below is DTCG-compatible, so that migration is mechanical. Do not build the pipeline before you need it.
- Kind
- Spec
- Section
- Design Tokens