🧩 Plasmo Developerscholebhature7887

Shadcn dosnt seem to work in content script ui

I have been trying to get Shadcn to work with CSUI. I followed almost everything from this server as well as the documentation, but it just doesn't seem to work. tailwind seems to work fine. am attaching some code can someone please help me out index.tsx

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

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

css

@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  */

@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  */

tailwind config

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
}

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
}