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.