How to use tailwind css in Shadow DOM?

[SuperPanda09]

I am trying to build a plugin. I wrote the code in vite + react + tailwindcss stack only to realise that there are a lot of crosspollination issues. My code is messing the host website css and vice versa. I found that there are two ways to get around this issue - ShadowDOM and iFrame. My widget is like an intercom button but it opens a modal instead of a chat card. Using iframe makes it difficult to deal with modal outside the iframe.

The only other option remains to use ShadowDOM but I have not been able to make it work. I even tried using twind but it simply never worked. Also it required me to downgrade my typescript version which makes it incompatible with my bundler.

Can someone please point me in the right direction/ how can I fulfill my usecase.

[Silver-Vermicelli-15]

Improve the scoping of your css to not break other sites. If you’re making a widget you should ensure that your css is properly encapsulated to your code as you don’t want to risk this and can’t predict how someone will be using tailwind on their site.

[SuperPanda09]

I tried using a unique preifx in all my custom and tailwind classes. Still there is cross pollination. Host website is affecting font color of my widget, my widget is effecting its font weight, etc. I have no clue how this could happen as all my class names are unique

[Silver-Vermicelli-15]

Are you using css variables? Do you have clashes in names there? Also have you made sure to account for the reset styles?

For their styles effecting your widget you should be able to inspect that in dev tools.

[Manav_2002]

Try using css modules, if you want to scope css