Tailwind gradient varaible issue, can anyone help to solve this

[naraina20]

here is the situation :
I have created a npm package, basically its a widget and I am uisng tailwind as css in it.
for css I am injecting the unpkg file at rendering time and I am rendering this widget in a shadow dom.
now when i test it in a newly created react applicaiton its working but when I embedded it in my main project which is aslo using tailwind for css the gradient is not working.
as you can see in index.css showing in image there is all tailwind classes and variables defined for gradient but idk why not working here ?
I implement some AI suggested solutions like

• define variables with initial value in shadow dom on rendering
• fetched the index.css file from unpkg and add it in style element in shadow dom.
• add :host before selectors like *,::before

[wongjn]

Tailwind gradients rely on CSS variables that rely on @property definitions. However, @property definitions don't work in shadow DOM, hence your gradients being broken. You'd need to consider hoisting the compiled @property definitions into the parent document. Related #15005