DEV Community

Cover image for Tailwind without Tailwind
Alex Sidorenko
Alex Sidorenko

Posted on • Originally published at padding-0.com

Tailwind without Tailwind

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;
Enter fullscreen mode Exit fullscreen mode

Check out a gist containing all major design tokens from Tailwind as CSS variables.

You can also see it in action on codesandbox.

👉 Original post

Top comments (2)

Collapse
 
hashbyt profile image
Hashbyt

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!

Collapse
 
meirlamdan profile image
meirlamdan