Pass specific tailwind values to bud.config

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.

Thanks for your time!

1 Like

Hi @AlexHay,

Great question!

My personal view is that your approach is the right way to go (tailwind.configbudtheme.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.

There’s a handy function tailwind.resolveThemeValue(key, extendOnly) which seems to handle defaults and extends.

In the default Bud 6.8.0 bud.config.js, try looking at the return value of:


You should be able to use this function to pull the values you need.

Hope that helps.


On another (related) note: If you’re wanting to import Tailwind theme values into JS (app) files, you can follow these instructions.


Thank you @talss89 – this is really helpful and exactly what I was after!

1 Like