# Pass specific tailwind values to bud.config

**URL:** https://discourse.roots.io/t/pass-specific-tailwind-values-to-bud-config/24799
**Category:** bud
**Tags:** bud
**Created:** 2023-02-13T00:34:08Z
**Posts:** 10

## Post 1 by @AlexHay — 2023-02-13T00:34:08Z

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!

---

## Post 2 by @talss89 — 2023-02-15T15:05:43Z

Hi @AlexHay,

Great question!

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.

There’s a [handy function `tailwind.resolveThemeValue(key, extendOnly)`](https://github.com/roots/bud/blob/62cdb8088eb4b0588c6b9486cc4578b1df9544ba/sources/%40roots/bud-tailwindcss/src/extension/index.ts#L123) which seems to handle defaults and extends.

- `key` is the config key you wish to access
- `extendsOnly` is optional, boolean, and if `true` will [“limit the values emitted to those defined under tailwind’s `theme.extend` key.”](https://bud.js.org/extensions/sage/theme.json/#:~:text=limit%20the%20values%20emitted%20to%20those%20defined%20under%20tailwind%27s%20theme.extend%20key.)

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

`app.tailwind.resolveThemeValue('fontFamily')`

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

Hope that helps.

Tom.

On another (related) note: [If you’re wanting to import Tailwind theme values into **JS (app) files**, you can follow these instructions.](https://bud.js.org/extensions/bud-tailwindcss#using-tailwind-values-in-js-files)

---

## Post 3 by @AlexHay — 2023-02-16T10:34:52Z

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

---

## Post 4 by @djmtype — 2023-04-20T16:39:11Z

Alex, I’m still stuck on this. I also want to pull in spacing from my tailwind config into Bud’s auto-generated `theme.json` file so spacing can be used for padding and margins. Would you mind sharing your `bud.config.js`?

---

## Post 5 by @AlexHay — 2023-04-20T16:55:14Z

Hi @djmtype, sure thing, below is the end of my bud.config.js. I hope it’s helpful! :slight_smile:.

The

```
/**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        variables: null,
        presets: null,
        appearanceTools: false,
        border: {
          color: false,
          radius: false,
          style: false,
          width: false
        },
        color: {
          background: false,
          link: false,
          custom: false,
          customDuotone: false,
          customGradient: false,
          defaultDuotone: false,
          defaultGradients: false,
          defaultPalette: false,
          gradients: [],
          palette: []
        },
        layout: {
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          blockGap: true,
          margin: false,
          padding: false,
          units: []
        },
        typography: {
          customFontSize: false,
          fontStyle: false,
          fontWeight: false,
          letterSpacing: false,
          lineHeight: false,
          textDecoration: false,
          textTransform: false,
          dropCap: false,
          fontSizes: [],
          fontFamilies: []
        },
        blocks: {
          'core/button': {
            color: {
              palette: []
            },
            border: {
              color: false,
              radius: false,
              style: false,
              width: false
            },
            spacing: {
              width: false,
            }
          },
        }
      })
      .useTailwindFontFamily(true)
      .useTailwindColors(true)
      .settings(theme =>
        theme
          .set('layout.contentSize', app.tailwind.resolveThemeValue('spacing.content'))
          .set('layout.wideSize', app.tailwind.resolveThemeValue('spacing.content-wide'))
      )
      })
      .enable()
```

The layout.contentSize refers to custom tailwind spacing values:

```
spacing: {
        'content': '50rem',
        'content-wide': '70rem',
      },
```

---

## Post 6 by @djmtype — 2023-04-20T20:05:17Z

Many thanks! BTW, Tailwind has tokens for `screens`. [Customizing Screens - Tailwind CSS](https://tailwindcss.com/docs/screens)  
I’m just curious why you chose `spacing` over `screens`. Any benefit or just preference?

---

## Post 7 by @AlexHay — 2023-04-20T20:20:27Z

That’s a good question, I hadn’t actually considered it, good idea!

---

## Post 8 by @tobes — 2024-05-08T10:07:13Z

Hi @AlexHay, thanks for sharing.

I have tried a few different approaches, but keep getting ‘not defined in your tailwind config’ errors. Maybe someone here can see what the issue is?

Reduced versions of my two config.js files are pasted below, they give “✘ @roots/bud-tailwindcss: using `extendOnly` with spacing.content but `theme.extend.spacing.content` is not defined in your tailwind config.”

As well as `app.wpjson.set('layout.contentSize', app.tailwind.resolveThemeValue('spacing.content', true))` I also tried `app.wpjson.settings( theme => theme.set('layout.contentSize', app.tailwind.resolveThemeValue('spacing.content')) )` as per your example, but both give the same error, like it isn’t actually reading the tailwind config file at all.

Color palettes and other settings are being pulled in successfully using the `app.wpjson.useTailwindColors()` functions.

```
// tailwind.config.js
/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./app/ **/*.php', './resources/** /*.{php,vue,js}'],
  theme: {
    extend: {
      spacing: {
        'content': '50rem',
      },
    },
  }
};
export default config;
```

```
// bud.config.js
export default async(app) => {

    app.setPublicPath('/app/themes/theme/public/');

    app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://theme.local')
    .watch(['resources/views', 'app']);

    app.wpjson
      .setOption('styles', {
            typography: {
                fontFamily: 'var(--wp--preset--font-family--sans)',
                lineHeight: "1.4",
            },
        })
    .setSettings({
        typography: {
            customFontSize: false,
            lineHeight: false,
            fontWeight: false,
            fontStyle: false,
            textTransform: true
        },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .useTailwindSpacing()
    .set('layout.contentSize', app.tailwind.resolveThemeValue('spacing.content', true))
    .enable();
};
```

---

## Post 9 by @AlexHay — 2024-05-08T11:37:30Z

Hey @tobes, it may be worth checking out this thread:

> [@Bud changes from 16.12.3 to 16.13.x break build](https://discourse.roots.io/t/bud-changes-from-16-12-3-to-16-13-x-break-build/25913):
>
> Updating from Bud 16.2.3 along with its dependencies to 16.13.x has broken my build process. Error: @roots/bud-tailwindcss: screens.md is not a valid tailwind theme key. My screens are defined according to the Tailwind docs: // tailwind config module.exports = { theme: { screens: { 'md': '47.50rem', 'lg': '92.50rem', } } It looks like the error is in regard to the following in my bud config: .settings((theme) =\> theme .set('layout.contentSize', app.tailwind.resolveThem…

---

## Post 10 by @tobes — 2024-05-08T12:14:23Z

I assume this post is regarding bud changes from v6.12.3 to v6.13.x as I am only using bud v6.20.0 which I thought was pretty recent!

Thanks though, changing this line has done the job:

```
app.wpjson.set('layout.contentSize', app.tailwind.resolvedConfig.theme.spacing['content'])
```