← All posts

Sync Oxygen Builder Colors, Fonts and Breakpoints to Winden

winden

If you build with Oxygen Builder and Tailwind CSS, you probably keep the same colors, fonts and breakpoints in two places: Oxygen's Global Styles and your Tailwind config. Winden's Dynamic Data now reads those values straight from Oxygen Builder, the same way it already does for Gutenberg. You set a value once in Oxygen and Winden picks it up, so the two can't drift apart.

Dynamic Data for Oxygen Builder

If you design in the builder but write classes in Tailwind CSS, you usually end up copying hex codes and pixel values by hand. Dynamic Data removes that step.

Once Oxygen Builder is active, reload the Winden admin page. Open the Editor tab and look at the Dynamic Data panel on the right. There are now two groups:

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

Each option also has an Extend checkbox next to it.

Fetch Oxygen colors

Oxygen's global color palette is usually where a project's brand colors live. Fetching it gives you the same palette as Tailwind CSS utilities.

  1. In Winden → Editor, check Colors under Oxygen Builder.
  2. Click Update.
  3. Open the Style Guide tab and go to Colors.

You'll see the whole Oxygen palette listed with names and values, for example hippie-blue #6799b2, heavy-metal #2b2c27 and kelp #3b3c38. Some Oxygen colors come through as generic names with transparency, like color-#21 with rgba(255,255,255,0.75). In the video we point out that the transparency handling still needs an update.

Fetch font families

Your Tailwind font utilities should use the same typefaces you picked in Oxygen, not a second list you have to keep up to date.

  1. Back in the Editor tab, check Font Family under Oxygen Builder.
  2. Click Update.
  3. In Style Guide → Typography, scroll to Font Families.

Winden now shows two families, text and display. These are the fonts registered in Oxygen: in the Oxygen editor they're under Settings → Global Styles → Fonts, as the text font and the display font.

Fetch font sizes

Oxygen font sizes can be fetched the same way. Check Font Size under Oxygen Builder, click Update, and the sizes you set in Oxygen come through to Winden's config.

Fetch breakpoints

Mismatched breakpoints are a common reason a layout breaks at one width and not another. Fetching Oxygen's breakpoints as Tailwind CSS screens means tablet: and phone-portrait: switch at exactly the widths Oxygen uses.

  1. In the Oxygen editor, open Settings → Global Styles → Width & Breakpoints.
  2. Set your values. In the video: Page Width 1680, Tablet 1200, Landscape 768, Portrait 480 (all px).
  3. Click Save Changes in Oxygen.
  4. In Winden → Editor, check Screens under Oxygen Builder and click Update.
  5. Open Style Guide → Screens.

Winden lists them as tablet: max 1200px, phone-landscape: max 768px and phone-portrait: max 480px.

When you change a value in Oxygen, fetch it again and Winden follows. You don't have to maintain a second set of design tokens.

Who is this for

  • Oxygen Builder users who write Tailwind CSS classes with Winden: one set of colors, fonts and breakpoints instead of two.
  • Teams handing a site between designers and developers: the designer edits Global Styles in Oxygen and the Tailwind utilities pick up the change.
  • Anyone who has had a layout break at a slightly different breakpoint: Tailwind CSS screens now use Oxygen's exact widths.

FAQ

Can Winden use Oxygen Builder's global colors as Tailwind CSS colors? Yes. Check Colors under Oxygen Builder in Winden's Dynamic Data panel and click Update. The full Oxygen palette then appears in Winden's Style Guide → Colors.

Which Oxygen settings can Winden fetch? Colors, font families, font sizes and screens (breakpoints). For Gutenberg, Winden fetches colors, space, font family and font size.

How do Oxygen breakpoints map to Tailwind screens? Oxygen's Tablet, Landscape and Portrait breakpoints come through as tablet, phone-landscape and phone-portrait, using max-width values (for example max 1200px, max 768px, max 480px).

What happens when I change a value in Oxygen? Save it in Oxygen and fetch again in Winden. The new value shows up in Winden's config and style guide, so the change is made in one place only.

Can I use Gutenberg and Oxygen Dynamic Data together? The Dynamic Data panel shows both groups side by side, and you check each option separately.

Get Winden → dplugins.com

Related posts