v6.4.3

Release notes are also available on bud.js.org

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

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

🩹 fix: @roots/sage bud.wpjson doesn't generate colors

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

✨ 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.

app.tailwind.generateImports()

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.

ℹ️ Release information

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