How to Use Tailwind CSS in Bricks Builder

Bricks Builder has a strong class system, which makes it a great match for Tailwind CSS. Instead of building a style for every element in Bricks’ visual controls, you add utility classes like flex gap-6 p-8 rounded-2xl and the design lives in the class list. What Bricks doesn’t do is generate Tailwind’s CSS. This guide covers how to make that work.

Why Tailwind with Bricks

• Speed. Typing grid md:grid-cols-3 gap-8 is faster than setting grid, columns, breakpoints and gap in four panels.
• Consistency. Spacing, colors and font sizes come from one scale, so the site doesn’t slowly collect 17 slightly different paddings.
• Portability. The same classes work in Gutenberg, templates and other builders.

Adding classes in Bricks

Select an element, open the class field at the top of the element panel, and type your classes. Bricks stores them with the element. You can add as many as you like, including responsive (md:) and state (hover:) prefixes.

The problem: the CSS has to exist

Tailwind only generates CSS for classes it sees. Bricks saves your pages in the database, not in files, so a normal Tailwind build step in your theme won’t see classes you typed in the builder. You need a compiler that reads what Bricks saves.

Setting it up with Winden

Winden compiles Tailwind CSS v4 inside WordPress and integrates with Bricks:

• Compile on save. Whenever a Bricks page is saved, Winden gets a signal and recompiles, so new classes are in the CSS without opening Winden.
• Live preview. In development mode the Tailwind compiler runs in the browser, so classes apply in the Bricks canvas as you type.
• Autocomplete. Enable it under Winden → Settings → Enable Autocomplete → Bricks. A Plain Classes field appears at the top of the left sidebar when you select an element, suggesting classes from your own configuration.
• Production mode serves a single purged CSS file to visitors.

Bring your Bricks colors along

Already defined a palette in Bricks? In Winden’s Wizzard, open Colors → Builder Integrations, choose Bricks, Fetch Colors and Import. Your Bricks colors become Tailwind classes (bg-brand, text-brand-700…) with autocomplete, and each color gets 10 shades automatically.

Start clean (optional)

If you want Tailwind to be the only styling layer, go to Winden → Settings → Dequeue Styles → Bricks builder to remove Bricks’ default styles on the front end. Test your pages afterwards, since elements that relied on Bricks’ defaults will change.

Tips

• Define tokens first. Set up colors, font sizes and spacing in the Wizzard before designing, so the classes you use are your design system, not arbitrary values.
• Mix freely. You can still use Bricks’ own style controls for one-offs; utilities and Bricks styles work together.
• Components with classes. Save repeated sections as Bricks templates; because the design is in the classes, they stay consistent everywhere.
• Paste existing Tailwind HTML straight into Bricks as elements: see how to paste HTML into Bricks Builder.

New to Tailwind in WordPress? Start with how to use Tailwind CSS in WordPress.