[V4][WordPress] Common style rules overrides Tailwind layer rules

[AnttiTolvanen01]

Hello Tailwind community!

TL;DR: The actual question is at the end of the message.

I'm creating an app to be displayed in WordPress admin view. In WordPress admin views, WP will load it's own default admin styles. These styles most often overrides styles I try to set with Tailwind.

Let's take an H2 heading as an example. I create an heading element with Tailwind classes. I try to remove default heading margins set by WordPress admin styles with the m-0 class.

<h2 class="m-0">This is my custom heading</h2>

Here is the WordPress admin default stylings for headings (notice the margin rule):

h2, h3 {
    color: #1d2327;
    font-size: 1.3em;
    margin: 1em 0;
}

Now my m-0 rule won't apply since it's considered a "low priority" styling rule in the browser:

I'm aware that when importing Tailwind in CSS file, you can import it with the important attribute, eg:

@import "tailwindcss" important;

But this will - as you know - generate the !important tag for every single style rules generated by Tailwind classes. I don't consider this being best practise and I'm afraid this may cause issues in the future, if some Tailwind class needs to be overridden for some unknown reason.

Stack that I'm using: WordPress (admin view) + React 19.0 + Vite 6.1 + Tailwind 4.0.6.

So the question is: Is there a way to make Tailwind classes as a regular classes (like it was in Tailwind 3.0) instead of CSS layers?

[wongjn]

You could consider unwrapping the utility classes from being in a CSS cascade layer like:

-@import "tailwindcss";
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";

[AnttiTolvanen01]

Thank you! This was the solution. I didn't even realize to try leaving the layer specification out of the utilities styles importing.

[esaia]

Wow thanks man

[volfadar]

thanksssssssss!!

[SpiZeak]

Thank you!

[sboerrigter]

Oh man, I have been debugging for so long before I found out that this was the problem... 😅

Unfortunately, the suggested solution doesn't work for me. I am trying to set a custom font-family like this:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css';
@import 'tailwindcss/preflight.css';
@import 'tailwindcss/utilities.css';

@layer base {
  body {
    @apply font-sans;
  }

  ...
}

@layer components {
  ...
}

@layer utilities {
  ...
}

That still adds @layer rules to the CSS output, so the custom font is still not working in the editor. This also screws up the front-end styles, because the tailwind rest styles are now loaded after the layers.

I am having more luck including the body styles outside of a @layer rule like this:

@import 'tailwindcss';

body {
  @apply font-sans;
}

@layer base {
  ...
}

@layer components {
  ...
}

@layer utilities {
  ...
}

But there are a lot more WordPress defaults that I would like to overwrite, like line height, link colors, margins, etc... Moving those styles outside of a @layer rule gives other CSS priority errors.

Any other idea's how to approach this?

[wongjn]

Unlayering everything may lead to unexpected results, as Tailwind has been built to use cascade layers. However, you can try unlayering everything and ordering things as needed:

@import 'tailwindcss/theme.css';
@import 'tailwindcss/preflight.css';

/* Base layer */
body {
  /**
   * This isn't really needed since this comes from Preflight.
   */
  font-family: var(--font-sans);
}

…

/* Components layer */
…

@import 'tailwindcss/utilities.css';


/* Utilities layer */
…

[sboerrigter]

Thanks for the quick reply! Your suggestion seems to work. I had thought of this, but I thought all @import should always be on top of the CSS file, so I hadn't tried it. Maybe that is fixed by PostCSS nowadays.

I still feel like this is a workaround, and I think @layer rules should be supported by the WordPress editor by default, so I also created an issue there: WordPress/gutenberg#69833

[wongjn]

@import statements must be at the start of CSS files generally. Tailwind (not PostCSS) processes the @import statements and inlines their resolved content into the output CSS file.

[sboerrigter]

Ah ok, good to know. Thanks!

[tarikhamilton]

Just curious, any issues with conflicting styles? Tailwind broke some of WordPress's admin area and wondering if you had an easy solution. You might be just loading it on your custom page, but thought I'd ask.

[rozsazoltan]

The problem isn't with TailwindCSS, but with WordPress and anything that doesn't use CSS layers. CSS layers ensure that certain layers are always stronger than others, allowing you to permanently get rid of !important. TailwindCSS layers range from weak to strong.

theme, base, components, utilities

• How can I insert a custom layer between TailwindCSS's default base, components and utilities layers?

Unfortunately, unlayered CSS is stronger than any layer, so it will still override all TailwindCSS classes placed in the utilities layer. Here's a small example demonstrating this behavior:

• From v4 the reset style cannot be overridden by TailwindCSS classes

Although most sources suggest making the utilities layer unlayered, this can be a solution but it's not consistent. The best approach is to place all other CSS code into the appropriate layers as well. If needed, a new layer can be introduced. Here's an example of such a solution for AndDesign:

• TailwindCSS v4 utilities are too weak to override the styling of Ant Design v5 components

I'm not very familiar with WordPress, but if I knew the location of the CSS files, I would simply load them into a layer (I assume that in WordPress, all CSS is also stored in separate files).

@layer theme, base, wordpress, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@import "./path/to/my/wordpress.css" layer(wordpress);