CreatiShadowRootUi tailwindcss application encountered issues on hover card component
Closed this issue · 1 comments
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:
<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';
import App from "./App.vue";
export default defineContentScript({
matches: ['<all_urls>'],
// 2. Set cssInjectionMode
cssInjectionMode: 'ui',
async main(ctx) {
// 3. Define your UI
const ui = await createShadowRootUi(ctx, {
name: 'example-ui',
position: 'overlay',
anchor: 'body',
onMount: (container) => {
// Define how your UI will be mounted inside the container
const app = createApp(App);
app.mount(container);
return app;
},
onRemove: (app) => {
// Unmount the app when the UI is removed
app?.unmount();
},
});
// 4. Mount the UI
ui.mount();
},
});
Steps to reproduce
No response
System Info
System:
OS: Windows 10 22H2
CPU: 12th Gen Intel(R) Core(TM) i5-12400 2.50 GHz
Binaries:
Node: 20.18.0
npm: 10.9.0
Browsers:
Chrome: 128.0.6613.137
npmPackages:
vite: 5.4.10 => 5.4.10
wxt: 0.19.13 => 0.19.13
Used Package Manager
npm
Validations
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Please provide a full project reproduction, just copy-pasting a few files isn't enough for me to help out.