Replace tailwind directives in editor css #3256
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.