How to Use Tailwind CSS in Oxygen Builder

Oxygen users were among the first to adopt utility classes in WordPress: Oxygen gives you clean markup and a class field on every element, and Tailwind fills that class field with a complete design system. This works in both Oxygen Classic and the new Oxygen 6.

Why Tailwind in Oxygen

• One design system. Colors, spacing and type sizes come from Tailwind’s scale instead of values typed into dozens of style panels.
• Less CSS to manage. No growing stylesheet of one-off selectors.
• Easier handover. Anyone who knows Tailwind can read your layouts from the class names alone.

Adding classes in Oxygen

Select an element and type classes into its class field, for example flex flex-col gap-4 p-8 md:flex-row. Oxygen outputs them on the element.

Getting the CSS generated

Tailwind generates CSS only for the classes it finds. Oxygen stores your designs in the database, so a Tailwind build step in theme files (Oxygen doesn’t even use a theme) won’t see them. You need a compiler that knows what Oxygen saves.

Setting it up with Winden

Winden compiles Tailwind CSS v4 inside WordPress and integrates with both Oxygen versions:

• Compile on save. When you save an Oxygen page, Winden is notified and recompiles, so new classes are always in the CSS.
• Live preview. In development mode the compiler runs in the browser, so classes apply in the Oxygen canvas immediately.
• Autocomplete. Enable it under Winden → Settings → Enable Autocomplete → Oxygen. A Plain Classes field appears when you select an element (at the top of the left sidebar in Oxygen Classic; in Oxygen 6 on the left or right, depending on your sidebar setting) and suggests classes from your own configuration.
• Production mode gives visitors one small, purged CSS file.

Reuse your Oxygen colors

In Winden’s Wizzard, Colors → Builder Integrations → Oxygen → Fetch Colors → Import turns your Oxygen global colors into Tailwind classes with 10 automatic shades each.

Moving from Oxygen Classic to Oxygen 6 (or to Gutenberg)

Oxygen 6 is a rewrite, so moving a Classic site means rebuilding it. Tailwind makes that far less painful: when the design lives in class names rather than in builder style settings, the same classes work in Oxygen 6, in Gutenberg, or anywhere else. Considering the block editor instead? Read Oxygen vs Gutenberg in 2026.

Tips

• Set up your design tokens (colors, fluid font sizes, spacing) in the Wizzard before you build, so every class maps to your system.
• Use Oxygen’s reusable parts or templates for repeated sections; with utility classes they stay identical everywhere.
• Keep Oxygen’s own style controls for rare one-offs.