Shadcn dosnt seem to work in content script ui

import cssText from "data-text:~/contents/style.css"
import type { PlasmoCSConfig } from "plasmo"

import { Button } from "../components/button"

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"]
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText.replaceAll(":root", ":host")
  return style
}

const PlasmoContent = () => {
  return (
    <div className="fixed inset-5">
      <button className="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-full border border-gray-200 hover:bg-gray-100 hover:text-blue-700">
        HELLO WORLD
      </button>

      <Button size="lg" variant="destructive">
        Demo Button
      </Button>
    </div>
  )
}

export default PlasmoContent

@config "./tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
/* ...rest shadcn vars  */

const { fontFamily } = require("tailwindcss/defaultTheme")
// /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./contents/*.{ts,tsx}"], // your content-script files
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px"
      }
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
      // rest of the theme
}