This is exactly the sort of thing I want to be reading right now. We often use Tailwind to generate only custom properties and utility classes.
Up until v4 was released, Tailwind was purely JavaScript configured. We could quite easily rig up some design tokens and let it do the rest — it’s how the Complete CSS system works under the hood.
The newer version of Tailwind is more CSS-based though which I’m not feeling at all.
I’ve got a real problem with a framework getting all in our CSS source code — especially one that completely changes in a major version. Really, we want to stick with tooling that generates CSS — utilities and custom properties — and stays as far away from our source code as possible. This is mainly for portability and scalability reasons — being deeply entwined with a framework makes it harder to move our CSS around when we need to. With that in mind, we’re exploring different ways of generating this stuff, ongoing.
This segues nicely to what Michelle is doing here. She’s got a JS-object and is very nicely converting that into a block of custom properties. This could quite comfortably be extended to generate utility classes too!
Check it out