Tailwind CSS

Sage includes support for Tailwind CSS out of the box, along with some helpful functionality for integrating your Tailwind config into the WordPress block editor.

# Content configuration

Sage sets the Tailwind content configuration to the areas of your project that will contain Tailwind CSS class names. Any of the files in these files and directories that use Tailwind class names will be included in your theme build:

content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],

By default, this covers all theme template files along with all files in the app/ directory.

Generating theme.json from Tailwind's config

Sage includes a theme.json file for configuring the WordPress editor. It's generated during asset builds automatically and accounts for settings from the Tailwind config (tailwind.config.cjs).

In Sage's Bud config (bud.config.js), there a section for generating theme.json. This is where you'll want to make any changes to your theme.json file.

# Default color palette

Rather than manually defining the editor colors by adding them to theme.json, your Tailwind config will be used to generate colors for the WordPress editor.

Tailwind’s default color palette is a good starting point for sites that don’t already have color/branding guidelines to follow.

# Sizes and font families

In addition to including Tailwind’s color palette for the WordPress editor, Sage will also configure the editor with Tailwind’s font families and font sizes.

Be sure to take a look at Bud’s documentation on this feature for further information.