Pass specific tailwind values to bud.config

bud
1

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
2

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) which seems to handle defaults and extends.

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.

4 Likes
3

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

1 Like
4

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?

5

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',
      },
2 Likes
6

Many thanks! BTW, Tailwind has tokens for screens. Customizing Screens - Tailwind CSS
I’m just curious why you chose spacing over screens. Any benefit or just preference?

7

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

8

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();
};
9

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

10

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'])
1 Like