A stylesheet decays in a predictable way: someone needs a slightly different blue, adds it locally, and two years later the brand has nine of them. Tokens stop that. Tailwind is how we apply them without a naming committee.
Tokens are the contract
Colour, spacing, radius, type scale and motion durations are declared once as custom properties. Every utility resolves to one of them. A designer changing a token changes the product; a developer inventing a value outside the scale gets caught in review.
Why utilities and not components-only CSS
Styles live next to the markup they affect, so deleting a component deletes its styles with it. There is no orphan stylesheet growing quietly in the corner, and no shared class that three unrelated screens turn out to depend on.
Keeping it readable
- Repeated patterns get promoted into a real component, not copied a fourth time
- Long class lists are a signal to extract, and we treat them as one
- Anything genuinely custom — a mask, a keyframe, a gradient — is written as plain CSS rather than forced through utilities
- Dark and light surfaces are token swaps, never a duplicated set of rules
Contrast is checked, not assumed
Every text and surface pairing is measured against WCAG AA before it ships. A muted grey that clears the ratio on a dark panel often fails on a light one, so the token set carries a value per surface instead of one value everywhere.
The output
Unused utilities never reach the browser, so the shipped stylesheet is a fraction of the vocabulary available while writing it. On a content site that is the difference between a stylesheet that blocks the first paint and one that does not.
Used with React and Astro, and under the design work described on UI and UX design.