Tailwind 4 utilities in editor being overridden due to cascade layers

[drbroad]

One issue I was having with the latest release of sage, is that the styles in wp-reset & common were overriding tailwind utility classes in the Gutenberg editor.

For example, lets say I am using acf composer to make my gutenberg blocks. My simple block contains an h1 containing the classes bg-gray-900 text-gray-200.

Due to the wp-reset styles not being loaded into any layer - they take priority over the tailwind utilities:

My question is: what is the preferred way to handle this?
Im sure i could setup a post css plugin to wrap all the utilities - but that seemed like potential overkill.

The solution I have been working with currently is:

// deregister scripts
add_action( 'enqueue_block_editor_assets', function (){

	$to_deregister = [
		'wp-reset-editor-styles',
		'common',
	];

	foreach ($to_deregister as $handle) {
		wp_deregister_style($handle);
	}
});

// add inline styles with layers
add_action('admin_enqueue_scripts', function () {
	$files = [
		[
			'name' => 'reset', 
			'type' => 'css', 
			'path' => ABSPATH . 'wp-includes/css/dist/block-library/reset.css'
		],
		[
			'name' => 'common', 
			'type' => 'css', 
			'path' => ABSPATH . 'wp-admin/css/common.css'
		],
	];

	foreach ($files as $file) {
		$css = @file_get_contents($file['path']);
		echo '<!-- ' . $file['name'] . ' inline style -->';
		echo '<style>@layer ' . $file['name'] . ' {'; 
		echo $css;
		echo '}</style>';	
	}
});

Anyone got a better way / see problems with this approach?

[ben]

I don’t think you’re using the iframed editor based on what you’ve shown

Is your ACF block set to use v3 of the block API?

[drbroad]

I could be mistaken, but ACF Composer allows us to update the blockVersion - but not the api version :

src/Block.php

@Log1x would be able to clarify that one

[ben]

Reminder to read our guidelines and be upfront about what your setup is like — it’s important to know off the bat that you’re using ACF Composer.

Have you looked into what it might look like to contribute support for that in ACF Composer?

[drbroad]

@ben Well, i did mention that I was using ACF composer in the 2nd paragraph of my initial post - i just didn’t add that tag.

Sorry about that.

[ben]

You’re right, I misread that.

If you manually change the api_version to 3, are you seeing the same behavior for your block?

[drbroad]

@ben After changing that manually, it works.

I apologize - i had just worked out by deduction that the only changes to my latest setup compared to my previous install, was the latest Sage theme.
I never thought to check the block version until you mentioned it - Ill be submitting a PR to that repo later today to change the API version from within the block generated by ACF Composer.

Thanks for your help!

[ben]

I’m sure Brandon will appreciate the PR

But based on this post, it feels like there’s still something we need to figure out when someone adds a v2 block to the editor. Will at least mention this gotcha in the docs at a minimum. Thank you for reporting this, and we definitely want to know if there’s anything else you run into while building with Sage 11.

[Liskownik]

I have same problem with layers. Clean installation, without any plugins, just sage 11 out of the box.
Editor is with iframe, I have only default v3 blocks.

All styles from app.css/editor.css is overridden by other styles without layers.

Unfortunately css doesn’t allow you to change the order so that unassigned styles come before layers, which is really stupid. For now I’ll probably try the solution above

[ben]

just sage 11 out of the box.

No it ain’t

What’s up with your editor showing app.css on the right in your screenshot? How’s that relevant to editor styles? If you’re wanting to style the editor, you should be modifying editor.css

Give us some code that shows us how to reproduce what you’re discussing, because “sage 11 out of the box” implies you’ve made no changes

This topic was originally about the editor not being iframed, which isn’t what you’re running into. Please make a new topic with all the relevant details

[Log1x]

Chiming in with an alternative solution to the above. With this stylesheet only being loaded in the editor, I’d possibly lean towards Styling with utility classes - Core concepts - Tailwind CSS and never think about a specificity issue again.

[Liskownik]

You are right, I added a few lines in css and import app.css in editor.css. I created a new topic with a more extensive description