Did you know you can use all the benefits of Tailwind CSS without using the library itself?
Tailwind is a design system. And like any design system, it has design tokens. Design tokens are all the hardcoded values like colors, spacing, border sizes, etc.
All these design tokens can be extracted as plain CSS variables, and used just like that:
border-radius: var(--rounded-lg);
background-color: var(--white);
padding: var(--s8);
width: var(--s60);
box-shadow: var(--shadow-lg);
text-align: center;
Check out a gist containing all major design tokens from Tailwind as CSS variables.
You can also see it in action on codesandbox.
Top comments (2)
Great breakdown of how to leverage Tailwind's design system without the library itself! This approach is especially useful for teams looking to maintain a consistent design language while avoiding dependency bloat.
At Hashbyt, we often advocate for a 'Frontend-First' philosophy, and design tokens like these are a perfect example of how UI/UX can drive scalability. By extracting tokens into CSS variables, you're essentially future-proofing your design system making it easier to integrate with AI-driven interfaces or enterprise-level apps.
Curious have you explored how this approach impacts developer onboarding or collaboration in larger teams? Would love to hear your thoughts!
github.com/zvizvi/freewindcss