This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
Product upvotes vs the next 3
Waiting for data. Loading
Product comments vs the next 3
Waiting for data. Loading
Product upvote speed vs the next 3
Waiting for data. Loading
Product upvotes and comments
Waiting for data. Loading
Product vs the next 3
Loading
tailwind-dictionary
A Tailwind theme from design tokens, in one command
tailwind-dictionary turns JSON tokens from Figma, Tokens Studio or Style Dictionary into a Tailwind CSS 4 or 3 theme — with light, dark and any other themes. One config.json instead of a build script. Export modes from Figma and plug the files in without conversion. Themes switch with a data-theme attribute on any element. Clear one-line errors and a watch mode. Try it in the browser playground first: your tokens never leave the page. Free and MIT-licensed.
Hi Product Hunt! I'm Evgenii, a frontend developer & designer.
I wrote tailwind-dictionary for my own design system, pbstyles. Its colors, sizes and fonts are described as tokens, and I wanted the Tailwind theme to be built from them instead of maintained by hand. Now the theme builds with one command, and since version 2.6 the package also reads variables exported from Figma.
What it does:
– reads Figma's native variables export, Tokens Studio and Style Dictionary tokens;
– builds a theme for Tailwind CSS 4 or 3;
– makes light, dark and any other themes that switch with a data-theme attribute;
– is configured with one config.json, no build script.
The package page has a live example: tokens, the theme built from them, and a block where you can switch the theme.
If you need help with a Figma export, themes or style builds — get in touch: Telegram @prosazhin or prosazhin@gmail.com. More of my work is at prosazhin.dev.
About tailwind-dictionary on Product Hunt
“A Tailwind theme from design tokens, in one command”
tailwind-dictionary was submitted on Product Hunt and earned 0 upvotes and 1 comments, placing #152 on the daily leaderboard. tailwind-dictionary turns JSON tokens from Figma, Tokens Studio or Style Dictionary into a Tailwind CSS 4 or 3 theme — with light, dark and any other themes. One config.json instead of a build script. Export modes from Figma and plug the files in without conversion. Themes switch with a data-theme attribute on any element. Clear one-line errors and a watch mode. Try it in the browser playground first: your tokens never leave the page. Free and MIT-licensed.
On the analytics side, tailwind-dictionary competes within Design Tools, Open Source, Developer Tools and GitHub — topics that collectively have 895.4k followers on Product Hunt. The dashboard above tracks how tailwind-dictionary performed against the three products that launched closest to it on the same day.
Who hunted tailwind-dictionary?
tailwind-dictionary was hunted by Evgenii Sazhin. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
For a complete overview of tailwind-dictionary including community comment highlights and product details, visit the product overview.
Evgenii Sazhin