← All posts

Tailwind CSS Global Styles with @apply in Oxywind (Winden)

winden

If you add Tailwind CSS classes to every heading, card and wrapper by hand, one design change means editing every one of them. In this video we use Tailwind CSS global styles with @apply in the Global CSS tab of Oxywind (now Winden) instead. You style headings, fonts and grids once, override only the elements that need to look different, and add responsive breakpoints from one central place.

Basic setup

To see how global styles scale, you need a page with repeated elements. Ours is a plain Oxygen Builder layout. It has a main wrapper, an H1 and a paragraph, an H2 and a paragraph, then a Card wrapper with three cards. Each card has an image, an H2 and a paragraph.

In the Oxygen structure panel the page is just Div, Heading, Text, Heading, Text and a Card wrapper with three Divs inside. None of these elements has Tailwind classes on it. All the styling in this video comes from the global stylesheet.

Global settings

Global styles need room to write. A small text box gets cramped quickly. That's why Oxywind 4.0 moved them out of the old small text areas and into their own tabs on the Oxywind Settings page:

  • Global CSS: your global stylesheet, with the @tailwind base;, @tailwind components; and @tailwind utilities; directives at the top
  • Configuration: the Tailwind config
  • Settings: CDN, Enable Worker ("Use Worker to compile optimized css"), Cached CSS, Worker Endpoint and the Oxygen/WordPress dequeue options
  • License and Documentation

After you edit Global CSS, click Save Changes and refresh the front end to see the result.

Apply font

Setting a font family on every text element is repetitive, and it's easy to miss one. Apply it once to the root instead and everything inherits it.

  1. Open Global CSS.
  2. Target html (or body) and use @apply with a Tailwind utility from the docs. We used font-mono so the change is easy to see.
  3. Save and refresh. All text on the page is now monospace, and no element got a class.

Headings work the same way:

  1. Add an h1 rule with @apply font-serif, then add a size. We tried a few and ended on text-6xl.
  2. Add an h2 rule with font-serif text-4xl.
  3. Save. Every H1 and H2 on the site updates at once, including the H2s inside the cards.

Override a single element

Global styles are defaults, not a lock. Say all the card headings should stay black except one. Select that heading in Oxygen and give it its own Tailwind text color class from the Text Color docs. That one heading changes and the others keep the global style. On the final page, one card title is pink and the other two are still black.

Apply grid

A card layout that repeats across pages needs the same grid classes every time. Put them in one global class instead, and any element that gets that class becomes the same grid.

There is a catch here. Our wrapper was first named 3-card-wrap, and it didn't work. A CSS class name can't start with a number, so the rule is silently ignored. We renamed it to card-wrap-3.

  1. In Oxygen, set the Card wrapper's class to card-wrap-3.
  2. In Global CSS, add a .card-wrap-3 rule and @apply grid grid-cols-3 plus a gap from the Gap docs.
  3. Save and refresh. The three cards now sit side by side.

Now you can put card-wrap-3 on any other element and it gets the same layout. You don't have to type all the classes again.

Apply breakpoints

So far, resizing the browser changes nothing: the H1 is always text-6xl and the grid always has three columns. Tailwind breakpoint prefixes work inside @apply too, so you can make the whole layout responsive from the same file.

Tailwind is mobile-first. The base class is the small-screen value, md: applies from the medium breakpoint up and lg: from large up.

  1. Change the h1 rule to text-4xl md:text-5xl lg:text-6xl. The heading now grows with the screen.
  2. Change the grid to grid-cols-1 md:grid-cols-2 lg:grid-cols-3. The cards go from one column to two to three.
  3. Save and resize the browser to check each step.

This is the final Global CSS from the video:

@tailwind base;
@tailwind components;
@tailwind utilities;


html {
    @apply font-mono;
}

h1{
    @apply font-serif text-4xl md:text-5xl lg:text-6xl;
}

h2{
    @apply font-serif text-4xl;
}

.card-wrap-3{
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

That's about 20 lines, and they style the typography, the card grid and the responsive behavior of the whole page. The only per-element classes left are the ones you add on purpose to override something.

Who is this for

  • Oxygen Builder users on Oxywind or Winden who are tired of adding the same Tailwind classes to every heading and card.
  • Site builders working on larger projects, where changing a heading size or card layout should be one edit, not a hunt through every page.
  • Developers new to @apply who want to see how global defaults, per-element overrides and breakpoints fit together.

FAQ

Can I use Tailwind @apply in Oxygen Builder?

Yes. With Oxywind (now Winden), you write @apply rules in the Global CSS tab next to the @tailwind directives. Those styles then apply across the site.

Why doesn't my Tailwind class work when it starts with a number?

A CSS class name can't start with a digit. In the video, 3-card-wrap failed silently. Renaming it to card-wrap-3 fixed it.

Can I still style a single element differently after setting global styles?

Yes. Add a Tailwind class to just that element in Oxygen. In the video, one card heading gets its own text color and the others keep the global style.

Do responsive prefixes like md: and lg: work inside @apply?

Yes. The final stylesheet uses md:text-5xl lg:text-6xl on h1 and md:grid-cols-2 lg:grid-cols-3 on the card grid. Both change as the browser is resized.

Is Oxywind the same as Winden?

Yes. Oxywind was renamed to Winden, and this workflow belongs to that product.

Get Winden → dplugins.com

Related posts