Issue with Preflight overriding DaisyUI styles, is wrapping it in @layer base safe?

[boynet]

Hi,
I'm using DaisyUI and ran into an issue where the default Preflight styles were not properly layered, which caused them to override DaisyUI styles unexpectedly.
To fix this, I wrapped the Preflight import inside a @layer base block in my tailwind.css file like so:

@if $target != editor {
	@layer base {
		@import "tailwindcss/preflight";
	}
} @else  {
	/**
	 * In the editor, we only want to apply Preflight to descendents of an
	 * element with the `not-prose` class.
	 */
	:where(.not-prose) {
		@layer base {
			@import "tailwindcss/preflight";
		}
	}
}

After this change, DaisyUI seems to work correctly.
My question is:
Is this approach safe and recommended? Are there any potential side effects I should be aware of?
Thanks in advance!

[gregsullivan]

Hello—Thanks for posting this!

The reason _tw doesn't wrap imports from Tailwind in @layer is because WordPress's own styles don't use @layer, so if you're using WordPress's own styles, Tailwind isn't able to override them. (Styles outside @layer will take precedence over those inside @layer.)

If you're disabling all of the core stylesheets, your approach shouldn't have any side effects. If you need, e.g., default block editor styles, and you're hoping to add styles from Tailwind on top of that, you may run into issues with Preflight styles not being applied to block editor elements in the way you'd expect.

That said, since you're selective wrapping only Preflight, I think there's a chance this works without issue; the bigger problem was the default Tailwind approach of wrapping everything in layers.

Please let me know if you have any other questions as far as that goes!

[boynet]

Thanks a lot, I am in the early stage of my theme but so far so good

[gregsullivan]

Awesome, very happy to hear it!