Tailwind without Tailwind

#tailwind #tailwindcss #css #webdev

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.

👉 Original post