[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!