Generating Gutenberg Color Classes with Sage 10 and Tailwind

sage
,
1

For some reason, I’m not able to find any information on this. But I’m trying to figure out how to generate the CSS classnames for block colors using Sage 10 (v 6.6.9). While the palette based on the theme colors is configured in the tailwind config, and shows up in the editor, the corresponding selectors and properties are not generated, (i.e. .has-emerald-1-background-color ). What am I missing here?

2

Have you already visited this page Managing theme.json | bud.js ?

3

Howdy! This is something that I’ve been meaning to get documented, so I just got something up on a new Tailwind CSS specific docs page.

We’ll hopefully get an official Tailwind CSS plugin created for actually outputting the front-end styles that the block editor needs in the future. In the meantime, I added some information along with an example plugin that can be used to generate the has- prefixed color classes for the front-end use from pages/posts created with the block editor.

I think it’s important on most serious projects to strip all of the default Tailwind CSS colors (and sizes), and only include the ones provided by your designers. If you decide to add .has- background color and text color classes for all of the Tailwind CSS colors then you end up with a pretty thick stylesheet.

See https://roots.io/sage/docs/tailwind-css/#using-tailwinds-colors-from-the-block-editor-on-the-front-end

2 Likes
4

Thank you @ben ! Appreciate your quick response and help. And definitely this is just for our own theme’s custom colors.

1 Like