Tailwind style applied to hover card component is invalid

[viz1997]

hover card component：
https://www.shadcn-vue.com/docs/components/hover-card.html

I encountered some issues while using wxt createShadowRootUi to develop projects. Tailwind can be applied to the HoverCardTrigger of HoverCard normally, but when I hover my mouse over it, the content of HoverCardContent is displayed and I find that styles cannot be applied to HoverCardContent

Here is my code：

<script setup lang="ts">
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card'
</script>

<template>
  <HoverCard>
    <HoverCardTrigger class="text-red-500">Hover</HoverCardTrigger>
    <HoverCardContent class="text-red-500">
  
      The Vue Framework – created and maintained by @vuejs.
    </HoverCardContent>
  </HoverCard>
</template>

I don't know why this is happening. If anyone is aware of this issue and how to solve it, please let me know. Thank you very much

[nishu-murmu]

@viz1997
Maybe shadcn styles are not being imported in shadow DOM.
Hope this below doc helps.
https://wxt.dev/guide/resources/faq.html#my-component-library-doesn-t-work-in-content-scripts