wxt-dev / wxt

⚡ Next-gen Web Extension Framework
https://wxt.dev
MIT License
4.63k stars 197 forks source link

CreatiShadowRootUi tailwindcss application encountered issues on hover card component #1154

Closed viz1997 closed 1 week ago

viz1997 commented 2 weeks ago

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: [''], // 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

aklinker1 commented 1 week ago

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