Auto-syncing Tailwind config from Figma variables on every PR

On a Wednesday afternoon, a failed Vercel build revealed an error due to an undefined Tailwind utility class. A designer had renamed a core colour variable from blue-500 to brand-blue-primary in Figma. The design team published the update, and the frontend team pulled the new JSON files. However, no one updated the Tailwind configuration file to match the new token names, causing the build to crash.

This issue occurs frequently when design tokens are separated from framework configuration, resulting in a manual gap between the JSON file and the utility classes used by developers.

The typical solution involves exporting Figma variables to a JSON file and manually mapping the values to the Tailwind theme object in the tailwind.config.js file. This approach is fragile, relying on human memory, and becomes cumbersome when managing hundreds of variables across multiple themes. Parsing W3C Design Tokens can be done using a Node script that reads the W3C JSON format and flattens it into a Tailwind-compatible structure.

The script recursively reads the token object and builds a flat dictionary, converting keys like colors.brand.blue.500 to brand-blue-500, matching Tailwind's class naming convention.

Once the flat object of colours is generated, it is written directly into a new Tailwind configuration file. The script generates a TypeScript file, allowing the preservation of standard Tailwind plugins and type definitions. The dynamic colours are injected into the theme extension object, and the updated Tailwind configuration overwrites the old file. As a result, there is no longer any need for manual mapping, and the system updates automatically whenever a designer modifies a Figma variable.