base layer messing with custom elements

[vdegenne]

What version of Tailwind CSS are you using?

^4.0.3

What build tool (or framework if it abstracts the build tool) are you using?

just tailwindcss and native html features.

What version of Node.js are you using?

v23.4.0

What browser are you using?

Chrome

What operating system are you using?

Fedora 41

Describe your issue

I've talked about that before in this issue. When applying a stylesheet transformed by tailwindcss to a custom element the styles were not applied to the custom element because it was not using the :host namespace.

Similarly now, the base layer is widely spread into the custom elements which breaks all the private styles:

One solution would be to enclose the base layer styles into :root.

[vdegenne]

A temporary fix for now is to import what is needed without the base layer, but I don't think that's recommended.

@import 'tailwindcss/theme'
@import 'tailwindcss/utilities'

[philipp-spiess]

Hey! I'm confused that the reset goes beyond a shadow-root node. Is the stylesheet somehow attached to the inside of the shadow root? If you could share a quick repro that would be helpful, thank you.

[vdegenne]

@philipp-spiess no it doesn't go beyond, I'm specifically attaching a "tailwind stylesheet" to it. I've talked about that in the other issue I mentioned.

Also here's a repo for the reproduction: https://github.com/vdegenne/tailwindcss-4-and-shadow-doms

(note: works great in codespace)

[philipp-spiess]

Oh yeah gotcha sorry for the confusion.

I see the issues you have but I think changing the default here can be tricky too since this way, your only option to enable preflight inside a shadow tree if you want that behavior is to manually copy all of the preflight CSS and update it manually. Instead I think what you're doing (manually configuring to not include preflight) is probably a better approach. Or maybe even creating a different stylesheet that is more tailored towards your use case.

Ideally, I think, @import "tailwindcss"; attached to the shadow root should behave similarly as attached to the document and that would include applying preflight resets.

Going to close this since I'm not sure this qualifies as a bug but happy to talk about this more!

[vdegenne]

Alright, thanks to let me know. If I ever got any issues using this workaround, I'll make sure to report it and mention this thread!