Bud v6.4.3 released

bud v6.4.3 released

Release notes are also available on bud.js.org

:adhesive_bandage: fix: @roots/sage errors logged when not using tailwindcss

Errors no longer reported when not using tailwindcss in a @roots/sage project.

:adhesive_bandage: fix: @roots/sage bud.wpjson doesn’t generate colors

Colors now generated for theme.json when using bud.wpjson.useTailwindColors()

:sparkles: feature: @roots/bud-tailwindcss reference tailwindcss values in js files

You can now easily use tailwind theme values in your app code by importing them from the (virtual) @tailwind/* alias.

An example:

import {black} from '@tailwind/colors'
import {sans} from '@tailwind/fontFamily'

export const main = () => {
  document.body.style.backgroundColor = black
  document.body.style.fontFamily = sans

Generating the imports can be memory intensive and increase build times, so it is opt-in.


Better to generate imports only for specific keys (much less memory intensive):

app.tailwind.generateImports([`colors`, `fontFamily`])

This is a lot better than trying to import the actual tailwind.config.js file to read these values as the values are fully resolved (merged with defaultTheme, plugins applied, etc.)

And it’s a lot better than importing tailwindcss/resolveConfig and doing it in the app code because of the transitive dependencies taken on by that import.

It’s also better than pre-compiling a static json file because these values are tree-shakeable. The entire generated json for the default tailwind config is ~100kb.

The above example adds ~5kb to the overall bundle (and only because tailwind has so many default colors). If you use terser (bud.minify) the difference is entirely negligible.

:information_source: Release information

For more information review the diff to see what’s changed.