The Slack message that started it all

"Hey Alex, the new brand colours are not working in Tailwind. I tried using bg-brand-primary-500 and it just silently fails."

I got this message from a junior developer last month. I checked the Figma file. The design team had absolutely updated the colours. I checked our main branch. The Tailwind config was completely out of date. We had a massive gap between our design variables and our codebase.

Somebody was supposed to manually copy the hex codes from Figma into our tailwind.config.ts file. That person forgot. Honestly I do not blame them. Manually copying hex codes is a terrible job. It is boring and prone to human error.

We needed a way to automate this entirely. When a designer updates a variable in Figma, it should automatically update our Tailwind configuration.…