DEV Community

Cover image for Tailwind without Tailwind

Tailwind without Tailwind

sidkh profile image Alex Sidorenko Originally published at ・1 min read

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

Discussion (0)

Editor guide