Tailwind is powerful, but for our design-system work it can become too broad, too utility-first and too disconnected from owned CSS tokens.
Aplance ecosystem
postcss-token-utilities
Utility classes generated from CSS tokens
A compact PostCSS plugin that generates useful utility classes from CSS custom properties and design tokens.
Type
PostCSS plugin
Sector
Aplance ecosystem
Kind
Aplance ecosystem
What we built
We built postcss-token-utilities because Tailwind solves one very useful problem, fast utility generation, but often brings too much utility-first weight for projects that already have a design system. Our plugin extracts the part we actually need: generating compact, just-in-time-style utilities from CSS custom properties and design tokens, without asking the whole codebase to become Tailwind-shaped.
We built a small framework-agnostic PostCSS plugin that reads CSS variables and tokens, then generates the practical utility classes a project actually needs.
Combined with Aplance UI, the plugin helps us stay independent from UI-library churn while keeping fast, token-driven styling available across projects.
Details
Token-first utilities
Utilities come from owned CSS custom properties, so the design system remains the source of truth.
Compact by design
It keeps the useful part of utility generation without pulling the full project into a utility-first architecture.
Framework agnostic
It works with plain CSS, Astro, React or any stack already using PostCSS.