How to deal with the issue with WordPress styles and Tailwind's layered styles (weaker)?

[kostiantyn-petlia]

Hi.

I'm working on a new website and use Vite and Tailwindcss v4+, and ACF Blocks.
I faced with an unexpected for me issue with CSS layers, considering how much I've heard about WordPress + Tailwindcss.

The issue: All WP core, admin or plugins's styles are unlayered, so, they have priority over ANY layered styles.
Tailwindcss use CSS layers and it's great, but WordPress does not support cascade layers.

Please, advise how to deal with it.

• somehow wrap default WP styles with a CSS layer?
• use "important: true" in the Tailwindcss config?
• somehow disable/remove CSS layers during style compilation?
• any other working solution?

---

More details are below:

My compiled style file contains layered styles and they can't override any WP/plugins default styles.
The biggest issue is with the block editor and block styles in Dashboard.

Frontend:
For frontend I managed to use the 'wp_enqueue_scripts' hook and wrap all styles from $wp_styles->registered with @layer. It seems it works well.
Like this:

<style id="wp-block-library-inline-css" type="text/css">
  @layer base, wp, plugins, dashboard-wp, dashboard-plugins, components, utilities, trumps;
  @import url("/wp-includes/css/dist/block-library/style.min.css") layer(wp);
</style>

Backend:
But in WP Dashboard there too many styles, WP uses load-styles.php to optimize style loading. The same approach does not work and Dashboard is broken.

Example:
The simplest example of the issue is a button-link in my custom block:

<a href="#" class="... text-white no-underline"></a>

// Layer utilities
.text-white {
    color: var(--color-white);
}

WP common style overrides Tailwindcss classes:

a {
    color: #2271b1; // blue
}

on frontend:

a:where(:not(.wp-element-button)) {
    text-decoration: underline;
}

on backend in the block editor (where a block can be rendered too):

:where(.editor-styles-wrapper) a:where(:not(.wp-element-button)) {
    text-decoration: underline;
}

[wongjn]

You could consider unwrapping some of the styles from the @layers, like:

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

And if you still need more specificity (probably for utility classes, you could do something like):

@layer theme, base, components;

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

/**
 * The `*` will match anything, but the `#a` increases specificity.
 * You could replace this for an actual ID selector too, or perhaps
 * a class selector would be sufficient.
 */
:is(#a, *) {
  @tailwind utilities;
}

[kostiantyn-petlia]

@wongjn Thank you for support. For now it seems the minimal approach with unlayering of utilities works well. I will work with it some time more and if everything is good I will be back here to "Mark as answer".

[kostiantyn-petlia]

So, it seems that it works somehow. Currently my main.css looks like this:

@import 'tailwindcss/theme.css' layer(theme);
@import './theme/_fonts.css' layer(theme);
@import './theme/_theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import './base/_base.css' layer(base);
@import './vendors/_vendors.css';
@import './components/_components.css';
@import 'tailwindcss/utilities.css';
@import './utilities/_utilities.css';

@source './theme/.safelist.txt'; /* Add this classes to  the bundle always. */
@source '../../../templates';
@source '../../../blocks/**/*.php';
@source '../../../**/*.php';
@source '../../../assets/scripts/**/*.js';

@layer theme, base, components;

In general the CSS layers are great and they will work well when WP supports them. Until that the layers don't work with WP and you will face with issues all time.

WP uses :where() a lot. That and :is() and :has() will help you.

Also, in my opinion, I can't say that Taiwind fits with WP with PHP templates (ACF FRO) well. At the same time I can't say that Tailwind does not fit with WP totally.

You must take into account that you will face with a lot of different issues due to the "old style" of the PHP approaches of WP. CSS layers are not supported, you need a safelist for some classes, the prettier doesn't work well with PHP templates (but you need it for the class sorting and you will have semi-ugly templates), Vite works in a pretty different way, etc.

Of cause all benefits of Tailwind still are present.

I'm not say "Don't use Taiwind with WP", just be ready to looking for solutions and deal with work issues.