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>
Reproduction
// import type { ContentScriptContext } from "wxt/client";
import "~/assets/tailwind.css";
import { createApp } from 'vue';
Describe the bug
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:
Reproduction
// import type { ContentScriptContext } from "wxt/client"; import "~/assets/tailwind.css"; import { createApp } from 'vue';
import App from "./App.vue";
export default defineContentScript({ matches: [''],
// 2. Set cssInjectionMode
cssInjectionMode: 'ui',
async main(ctx) { // 3. Define your UI
}, });
Steps to reproduce
No response
System Info
Used Package Manager
npm
Validations