← All posts

Sync Bricks Builder Colors, Fonts and Breakpoints to Winden

winden

If you use Tailwind CSS in Bricks Builder, you probably keep two copies of your design system: the colors, fonts and breakpoints in Bricks, and the same values again in your Tailwind config. Every change means editing both and hoping they still match. This video shows how Winden's Dynamic Data pulls your Bricks Builder colors, font families and breakpoints into Tailwind, so you set a value once in Bricks and Winden picks it up.

Dynamic data for Bricks Builder

When your builder and your Tailwind config are set up separately, they slowly drift apart. Dynamic Data lets Winden read the values straight from the builder you already use.

In the Winden Editor, click the Dynamic Data icon next to the Update button. The Dynamic Data panel opens on the right, with one group per builder:

  • Gutenberg: Colors, Space, Font Family, Font Size
  • Bricks Builder: Colors, Font Family, Screens

Each option has its own Extend checkbox. Winden also supports Oxygen Builder, but it only shows a builder's group when that builder is active, so the panel doesn't fill up with options you can't use.

Fetch Bricks colors

If you keep your palette in Bricks, you shouldn't have to type every hex value into Tailwind again.

  1. In the Bricks Builder group, tick Colors.
  2. Open a page in Bricks, add an element (we used a heading) and go to Style → Typography. Your Bricks colors show up there as usual.
  3. Change a color in Bricks, save and reload Winden. It fetches the new value right away.

You don't copy anything by hand. You edit the color in Bricks and Tailwind uses it.

Extend vs. overwrite colors

Sometimes you want only your brand colors. Other times you still want Tailwind's full default palette as well.

  • With just Colors ticked, the Bricks colors overwrite Tailwind's default colors.
  • Tick Extend next to Colors and you get Tailwind's default colors plus the Bricks colors.

Pick overwrite if you want to limit the palette to your design system. Pick extend if you still need the Tailwind defaults.

Register and fetch font families

Fonts work the same way, but Bricks needs a registered font first. If you tick Font Family and nothing shows up, that's the reason.

  1. In WordPress, go to Bricks → Custom Fonts.
  2. Add a font named Title and publish it, then add a second one named Body and publish it.
  3. On a real site, upload your own font files with Add a font variant. We skipped that in the video because it was only a preview.
  4. Back in Winden, tick Font Family under Bricks Builder and reload.

The Typography section of Winden's Style Guide now lists body and title next to your colors.

Fetch breakpoints

When your Tailwind screens don't match your builder's breakpoints, a layout can switch at one width in Bricks and at another width in your utility classes. Fetching Screens fixes that.

Tick Screens under Bricks Builder and open Style Guide → Screens. With the Bricks defaults you get:

  • tablet_portrait: max 991px
  • mobile_landscape: max 767px
  • mobile_portrait: max 478px

Bricks is desktop-first by default, so Winden fetches these as max values.

Mobile-first breakpoint setup

Tailwind is mobile-first, so you may want Bricks to work the same way. Winden follows whichever setup you choose in Bricks.

  1. Go to Bricks → Settings and turn on Custom breakpoints.
  2. Reload the Bricks editor and open the Breakpoints panel.
  3. Click Mobile first and update. Mobile portrait becomes the Base breakpoint, and the others switch to min-width (Mobile landscape 767px, Tablet portrait 991px, Desktop 1279px).
  4. Reload Winden's Style Guide. The screens now come in as min-width values.

You can also edit a single breakpoint. We changed Desktop, saved, and after a reload the Style Guide showed desktop: 1680px next to tablet_portrait: 991px, mobile_landscape: 767px and mobile_portrait: 478px.

You no longer have to fight your builder to keep Tailwind in sync. Bricks holds the values, and when you update something there, Winden uses the new value across your site.

Who is this for

  • Bricks Builder users who write Tailwind CSS classes with Winden and don't want to keep two copies of colors, fonts and breakpoints.
  • Site builders handing a site to a client or team, who need one place where design changes are made.
  • Developers who want Tailwind's mobile-first screens to match a mobile-first Bricks breakpoint setup.

FAQ

How do I use Bricks Builder colors in Tailwind CSS?

In the Winden Editor, open Dynamic Data and tick Colors under Bricks Builder. Winden reads your Bricks palette, and when you change a color in Bricks, a save and reload is enough for Winden to use the new value.

Can I keep Tailwind's default colors alongside my Bricks colors?

Yes. Tick Extend next to Colors. Without it, the Bricks colors replace Tailwind's defaults. With it, you get both.

Why doesn't Winden show any Bricks font families?

Bricks only exposes fonts that you register under Bricks → Custom Fonts. Add and publish your fonts there (with their font files), then reload Winden.

Does Winden support mobile-first breakpoints in Bricks?

Yes. Bricks is desktop-first by default, so Winden fetches the breakpoints as max values. Turn on Custom breakpoints in Bricks → Settings, switch the Breakpoints panel to Mobile first, and Winden fetches min-width values instead, including any breakpoint widths you edit.

Does this work with Gutenberg or Oxygen Builder too?

The Dynamic Data panel also has a Gutenberg group (Colors, Space, Font Family, Font Size). Oxygen Builder is supported too, and its group appears once Oxygen is active.

Get Winden → dplugins.com

Related posts