Hello awesome team !
I’m becoming crazy about Gutenberg and Tailwind CSS.
When I enqueue my editor style file in Gutenberg I have some styling conflicts in the Gutenberg UI.
My idea was to import some partials files nested inside the .acf-block-preview to have a better specificity.
I don’t know if it’s the best approach and it seems not possible this way,
.acf-block-preview {
@tailwind base;
@import "common/global";
}
What would you do ?
Thank you 
Julien
Theme styles are added to Gutenberg using add_editor_style.
Gutenberg will then automatically download the styles file, parse the CSS (using a JavaScript parser) and change body and html to .editor-styles-wrapper to isolate the styles.
So you want to wrap your styles in a body selector for isolating them.
Thank you for your answer!
The problem is that when I load my stylesheet including Tailwind, it override some of Gutenberg UI and break things.
I am creating acf blocks for my theme, and I was thinking of wrapping all inside the acf-block-preview class.
It’s actually work partially, but now I have problems with the base styles being more specific and preventing the tailwind utility class to be applyed,
How are you working with Tailwind inside your theme to prevent Gutenberg issues ?
You can boost the specificity of your styles further.
There is a PostCSS plugin that wraps the styles automatically (you don’t want to use this for your theme styles though because this is already handled by the editor) - but you can see how they boost the specificity in their README:
The specificity can be often easily boosted by repeating parts of the selector, see
Wow interresting, I will give a try to the postcss-editor-styles.
What I was trying in the end, is removing completely the Tailwind base and some global stuff, then adding some default styling specific to Gutenberg in the editor stylesheet only.
It seems to work well for the moment.
This topic was automatically closed after 42 days. New replies are no longer allowed.