I’ve been trying to figure out for a while now how I can set up a single place where I can adjust styling variables for a project – reducing errors and making spinning up a new project a bit simpler.
Examples are: font family, colours, contentWidth, wideSize, vertical spacing, etc.
Using tailwind for most of the styling – it looks like the best approach is to use tailwind.config as the source rather than theme.json or css variables.
There are some really helpful functions (useTailwind…) for colours, font sizes, families, etc. But I can’t figure out how to pull a specific tailwind property. An example of this would be passing a value from tailwind spacing.example to layout.wideSize in theme.json. I’m aware of the .set function provided by Bud, but where i’m stuck is actually pulling a value from tailwind.config.
I’d really appreciate any advice on whether this is possible. Or alternatively, if i’m approaching this wrong, and should organise my styling variables another way.
My personal view is that your approach is the right way to go (tailwind.config → bud → theme.json). This got me digging into the @roots/bud-extensions codebase, and the answer to “How do I fetch Tailwind properties?” seems surprisingly simple:
In your bud.config.js file (or equivalent), you can access Tailwind variables as a tailwind object on the main Bud instance.