One theme block, every utility
- tailwind
- css
Tailwind 3 kept the colours in tailwind.config.js. Tailwind 4 keeps them in the stylesheet.
Open src/styles/global.css. The @theme block holds the values. Each value becomes a set of
utility classes.
The rule
A token named --color-signal gives you text-signal, bg-signal, border-signal and
fill-signal. You write the token once. Tailwind builds the rest.
Why this helps an editor
The colours live in one file. A designer can change the palette without a build tool.