wxt-dev/wxt

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>

image

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

Please provide a full project reproduction, just copy-pasting a few files isn't enough for me to help out.