Skip to content

Conversation

@pkosciak
Copy link

When the editor is not using an iframe, some WordPress core styles override Tailwind's styles. This occurs because WordPress's built-in styles (e.g., wp-includes/css/dist/block-library/reset.css) are applied directly to the editor content and are unlayered. In contrast, Tailwind styles are applied using CSS layers. Unlayered styles take precedence over layered ones—even if Tailwind's selectors have higher specificity, they can still be overridden by WordPress’s built-in styles.

To ensure Tailwind styles are not layered (and thus have higher precedence), we can import each Tailwind file individually using import directives. This approach prevents Tailwind from being wrapped in a layer, allowing its styles to override the CMS defaults.

@ehclau
Copy link

ehclau commented Sep 14, 2025

I tried various approaches for dealing with Wordpress editor styles overriding tailwind and still encountered edge cases here and there. Found a potentially reliable approach:

@import "tailwindcss" important;

Reference:
tailwindlabs/tailwindcss#15803

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants