CSS variables and design tokens
CSS custom properties let you express design decisions by role. A variable can hold a brand color, header height, spacing value, or surface color. Tailwind utilities can reference CSS variables, allowing a token to be changed centrally while components retain their structure.
A good token system separates raw palette values from semantic roles. For example, a blue palette may contain several shades, while --color-action represents the shade chosen for primary actions. This makes future rebranding and theme changes easier.
Choose semantic names
--color-action explains the role; --blue-700 describes the current color. Semantic tokens make theme changes easier to reason about.
Semantic token example
:root {
--color-action: #1d4ed8;
--color-surface: #ffffff;
--color-text: #0f172a;
--radius-card: 1rem;
}
[data-theme="dark"] {
--color-surface: #0f172a;
--color-text: #f1f5f9;
}đź’ˇ This illustrates semantic CSS variables independent of any particular Tailwind config. Components can consume the variables using supported arbitrary-value syntax or project-level theme definitions. Check contrast when changing token values.