🧩 Plasmo Developers•9mo ago

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
}

10 Replies

cholebhature7887OP•9mo ago

dir looks like this

cholebhature7887OP•9mo ago

output demo button should have red bg and other styles

Tamir•8mo ago

Hi @cholebhature7887 did you ever manage to fix this? Experiencing the same issue

cholebhature7887OP•7mo ago

Yes I have fixed it

Arcane•7mo ago

@cholebhature7887 has reached level 3. GG!

cholebhature7887OP•7mo ago

Yes I have fixed it

finn•7mo ago

@cholebhature7887 How did you manage to fix it? Having the same issue myself.

SENTRY•6mo ago

FYI, You need to edit your tailwind configs content to include the components folder, too. You can wildcard if you like (not sure about performance) content: ["./**/*.{ts,tsx}"], // your content-script files

cholebhature7887OP•6mo ago

I can share code if anyone wants it just DM me

SENTRY•6mo ago

@cholebhature7887 maybe posting your solution here for others to find would be a nice idea

Gaming

Programming

Shadcn dosnt seem to work in content script ui