Menu

A Tailwind CSS theme from design tokens in one command
📰

A Tailwind CSS theme from design tokens in one command

DEV Community: css·Evgenii Sazhin·about 6 hours ago
#FImqjBFL
#devtocss#devto#dev#theme#tokens
Reading 0:00
15s threshold

I design interfaces and build them myself. I have a style library, pbstyles: its colors, sizes and fonts are described as design tokens. I wanted the Tailwind theme to be built from those tokens instead of rewriting it by hand after every change in Figma. That's how tailwind-dictionary came about.

It takes tokens in JSON and builds a Tailwind CSS theme from them. Light and dark themes are built from the same files.

It's useful if you already have tokens but don't want to switch to Tailwind because you'd have to maintain the theme separately. Or if you're already on Tailwind and want to export variables from Figma and get a theme right away.

Why not just ask AI

AI can pull variables from Figma and build a theme. But AI tokens cost money, and the theme gets rebuilt after every design change. Spending them on the same routine task is a waste; better save them for harder problems. Also, AI may build the theme slightly differently each time.

With the package, you set up the build once.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.