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
css
tailwind config
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 PlasmoContentimport 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 PlasmoContentcss
@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
}