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).
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.
No comment highlights available yet. Please check back later!
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.
tailwind-dictionary was featured in Design Tools (263.5k followers), Open Source (69k followers), Developer Tools (521.5k followers) and GitHub (41.4k followers) on Product Hunt. Together, these topics include over 184.8k products, making this a competitive space to launch in.
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.
Want to see how tailwind-dictionary stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Evgenii Sazhin