Tailwind variables are not set in a shadow DOM

[macutko]

Hi,

Its my first time using a shadow DOM. I have a script (React app) that gets injected into a webpage. This script then loads the component (a small banner) and also injects the css file into the shadow dom.

All classes work as expected (e.g. pt-2) however some don't such as border because --tw-border-style is not defined for some reason.

If I inject the css file into the root dom, then the var's from TW work, but then the shadow dom doesnt have the classes. Thus if I inject the css into both dom's it starts to work.

It seems as if the TW variables are being set only onto the root. Is there a way for me to specify where to set them?

Cheers,

[wongjn]

I think you may be running into #15005.

[macutko]

seems like it. Thanks.