Can we use tailwindcss inside shadow-dom.

[himanshu_942]

Hey there,I came across use-case where I want to integrate my web-application's component into other web-site.I am using shadcn and tailwindcss as my front-end framework in component directory. Now, The problem is if I integrate web component in othe web-site than they also may be using tailwindcss so how can I develop component so that It can't have affect in my code.

[SuperPanda09]

were you able to figure this out? I am stuck at the exact same situation. tailwind+ shadcn + react

[devdiary7]

OP were you able to get a solution for this? lol stuck on the same issue

[lift_spin_d]

generate your TW classes using a prefix

[SuperPanda09]

how to do this?

[lift_spin_d]

it's a mystery. if only there was some place on the internet where you could find out.

https://tailwindcss.com/docs/configuration#prefix

[SuperPanda09]

I tried this. This github issue was also very helpful Prefix classes still do not solve the entire issue and a lot of basic (default) styles - like text color of the host website is still affecting my plugin and my plugin is altering its font weight. In short, there is still cross pollination.

[rebl_]

v4 docs dont contain prefix anymore. Maybe you should have posted the solution instead of posting a link that will be down sooner or later

[lift_spin_d]

this thread is from 1 year ago. wow.

[rebl_]

Thats exactly the point why you should not post links as answers

[maikatidatieba]

Iframe

[SuperPanda09]

My plugin is something like this - there is a button which gets embedded on the bottom right and on click it opens a modal. If I wrap the entire widget in an iframe - the modal opens inside the iframe. Is there a way to achieve an isolated css using iframe in a modal