--- title: I kept rewriting my Tailwind theme by hand after every... description: A npm package, tailwind-dictionary, builds a Tailwind CSS theme directly from design tokens exported from Figma. It reads both the W3C Design Tokens format... canonical: https://daily.dev/posts/i-kept-rewriting-my-tailwind-theme-by-hand-after-every-figma-change-so-i-wrote-a-package-export-fi-wripqoxkz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I kept rewriting my Tailwind theme by hand after every Figma change, so I wrote a package: export Figma variables, run one command, get a theme with light and dark modes. How do you keep Tailwind in sync with design tokens? | daily.dev og:description: A npm package, tailwind-dictionary, builds a Tailwind CSS theme directly from design tokens exported from Figma. It reads both the W3C Design Tokens format... og:url: https://daily.dev/posts/i-kept-rewriting-my-tailwind-theme-by-hand-after-every-figma-change-so-i-wrote-a-package-export-fi-wripqoxkz og:image: https://api.daily.dev/og/posts/WrIPqOxkz.png og:image:alt: I kept rewriting my Tailwind theme by hand after every Figma change, so I wrote a package: export Figma variables, run one command, get a theme with light and dark modes. How do you keep Tailwind in sync with design tokens? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # I kept rewriting my Tailwind theme by hand after every Figma change, so I wrote a package: export Figma variables, run one command, get a theme with light and dark modes. How do you keep Tailwind in sync with design tokens? **[WebDev](https://daily.dev/sources/webdev)** · [@prosazhin](https://daily.dev/prosazhin) · 14 upvotes · 5 comments ## Summary A npm package, tailwind-dictionary, builds a Tailwind CSS theme directly from design tokens exported from Figma. It reads both the W3C Design Tokens format (DTCG 2025.10) and the legacy Style Dictionary format, and also supports exports from Tokens Studio and Terrazzo. It generates themes for Tailwind 3 and 4, supporting multiple themes like light, dark, high contrast or a second brand. Configuration lives in one config.json file, and a --watch mode rebuilds the theme automatically when tokens change. The author built it to avoid hand-rewriting Tailwind themes after every Figma change, version 2.6.2 was used for the code examples. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@sinarezaei** · 4 upvotes > The part I'd be careful with is token changes that are technically valid but break the UI in subtle ways. Say a shared primitive gets updated and several semantic aliases inherit the new value. The build can pass while a chart's status colors lose contrast in dark mode or a disabled state becomes almost indistinguishable from the background. I'd put token validation and visual regression checks in CI alongside the generation step. That way, the Figma export stays the source of truth without making every design change a visual gamble. **@diyweb** · 2 upvotes > Generating the theme from tokens removes a whole class of drift between Figma and code. One thing that has helped us is treating contrast as part of the token contract: if a dark or high-contrast theme drops below WCAG ratios, the build fails instead of shipping. Does the package expose a hook where checks like that could run before the theme is written? **@ristotoldsep** · 1 upvotes > Finally, a Figma handoff that doesn't involve copying hex values at midnight. nice work. ## Similar posts on daily.dev - [A dev’s guide to Tailwind CSS in 2026](https://daily.dev/posts/a-dev-s-guide-to-tailwind-css-in-2026-3egyhtwax) · LogRocket · 2 upvotes · 0 comments - [Sharing Tailwind CSS Styles Across Apps in a Monorepo](https://daily.dev/posts/sharing-tailwind-css-styles-across-apps-in-a-monorepo-hdgz8er02) · Nx · 15 upvotes · 1 comments - [Tailwind CSS v4 Dynamic Themes with CSS Variables](https://daily.dev/posts/tailwind-css-v4-dynamic-themes-with-css-variables-g2jkzxglo) · SitePoint · 30 upvotes · 0 comments - [Simple Tailwind CSS 4 Setup for Jekyll](https://daily.dev/posts/simple-tailwind-css-4-setup-for-jekyll-llesuqwod) · RUBYLAND · 1 upvotes · 0 comments - [what's new and how to upgrade](https://daily.dev/posts/what-s-new-and-how-to-upgrade-x7ku7eoal) · FireUp · 16 upvotes · 2 comments --- Tags: [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#figma](https://daily.dev/tags/figma) [View this post on daily.dev](https://daily.dev/posts/i-kept-rewriting-my-tailwind-theme-by-hand-after-every-figma-change-so-i-wrote-a-package-export-fi-wripqoxkz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/i-kept-rewriting-my-tailwind-theme-by-hand-after-every-figma-change-so-i-wrote-a-package-export-fi-wripqoxkz","headline":"I kept rewriting my Tailwind theme by hand after every Figma change, so I wrote a package: export Figma variables, run one command, get a theme with light and dark modes. How do you keep Tailwind in sync with design tokens?","text":"Shared: A Tailwind CSS theme from design tokens in one command","url":"https://daily.dev/posts/i-kept-rewriting-my-tailwind-theme-by-hand-after-every-figma-change-so-i-wrote-a-package-export-fi-wripqoxkz","datePublished":"2026-10-29T07:44:47.683Z","dateModified":"2026-10-29T07:44:47.686Z","author":{"@type":"Person","name":"Evgenii Sazhin","url":"https://daily.dev/prosazhin","image":"https://lh3.googleusercontent.com/a/ACg8ocIbnHVGw-Td_LpgLUpotMMhVCxJpqA9ScyTUDA9pfp0yfrgkmI=s96-c","description":"Frontend developer \u0026 Designer","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":180}},"image":"https://media.daily.dev/image/upload/s--58gMhC4P--/f_auto/v1722860399/public/Placeholder%2012","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":14},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/qHWxkjbN2"},"comment":[{"@type":"Comment","text":"The part I’d be careful with is token changes that are technically valid but break the UI in subtle ways. Say a shared primitive gets updated and several semantic aliases inherit the new value. The build can pass while a chart’s status colors lose contrast in dark mode or a disabled state becomes almost indistinguishable from the background. I’d put token validation and visual regression checks in CI alongside the generation step. That way, the Figma export stays the source of truth without making every design change a visual gamble.","datePublished":"2026-10-29T08:48:56.665Z","url":"https://daily.dev/posts/WrIPqOxkz#c-S2CNORg90","author":{"@type":"Person","name":"Sina Rezaei","url":"https://daily.dev/sinarezaei","image":"https://lh3.googleusercontent.com/a/ACg8ocLXjJ5mCeyMCQK6CSjPfPxZisLuVwj3KOgnAtXoJoPAAsuvSrxh=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Generating the theme from tokens removes a whole class of drift between Figma and code. One thing that has helped us is treating contrast as part of the token contract: if a dark or high-contrast theme drops below WCAG ratios, the build fails instead of shipping. Does the package expose a hook where checks like that could run before the theme is written?","datePublished":"2026-10-31T16:20:37.669Z","url":"https://daily.dev/posts/WrIPqOxkz#c-lo7hYTTS5","author":{"@type":"Person","name":"DiyWeb","url":"https://daily.dev/diyweb","image":"https://media.daily.dev/image/upload/s--dgS6jDeN--/f_auto/v1790879420/avatars/avatar_774zDwMaRTNS1fv5OKStX?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Finally, a Figma handoff that doesn’t involve copying hex values at midnight. nice work.","datePublished":"2026-11-05T13:56:14.890Z","url":"https://daily.dev/posts/WrIPqOxkz#c-OYZ7VDKLr","author":{"@type":"Person","name":"Risto Tõldsep","url":"https://daily.dev/ristotoldsep","image":"https://lh3.googleusercontent.com/a/ACg8ocLDWc6mZn0JwNmXXw6WY0L_HJ6pegzRttooC5VgtXESHSj3MNYx=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/webdev","name":"WebDev"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"WebDev","item":"https://daily.dev/squads/webdev"},{"@type":"ListItem","position":3,"name":"I kept rewriting my Tailwind theme by hand after every Figma change, so I wrote a package: export Figma variables, run one command, get a theme with light and dark modes. How do you keep Tailwind in sync with design tokens?"}]} ```