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. No copy pasting allowed. Let us look at how you can build a pipeline to do exactly this using TypeScript and GitHub Actions.…