Not able to customize sheet in js

[gchandra25]

I'm using vite for my react app with js (not ts).
This is how I'm using the sheet
`



{post.replies || 0}

                <SheetContent
                  side={side}
                  className={`max-sm:h-[540px] p-6 bg-slate-300`}
                >
                  <SheetHeader>
                    <SheetTitle className="text-cyan-300">
                      Are you absolutely sure?
                    </SheetTitle>
                    <SheetDescription>{post.content}</SheetDescription>
                  </SheetHeader>
                </SheetContent>
              </Sheet>`

here the bg-slate-300 is working. but if I take bg-primary, then that's not working. again not able to override transparenct until removing the bg-black/80 from source code of overlay.

I'm sharing css configs for further references -
`// frontend\tailwind.config.js

/** @type {import('tailwindcss').Config} /
module.exports = {
mode: "jit",
darkMode: ["class"],
content: [
"./pages/**/.{js,jsx}",
"./components//*.{js,jsx}",
"./app//.{js,jsx}",
"./src/**/.{js,jsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
zIndex: {
55: "55",
60: "60",
65: "65",
},
width: {
"24/100": "24%",
"31/100": "31%",
"45/100": "45%",
"69/100": "69%",
},
margin: {
"custom-1": "1.5rem", // Add a custom margin value
"custom-2": "3.75rem", // Add another custom margin value
13: "52px",
},
fontSize: {
"xs+": ["13px", "18px"],
xxs: ["9px", "10px"],
},
colors: {
"clubgate-blue-1": "#3a5e98",
"custom-blue": "rgba(58,94,152,1)",
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))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
colorPrimary: "var(--color-primary)",
colorSecondary: "var(--color-secondary)",
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
// darkMode: "class",
// theme: {
// extend: {
// colors: {
// primary: "var(--color-primary)",
// secondary: "var(--color-secondary)",
// },
// },
// },
};
and/* frontend\src\index.css */

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

/* -------------------------------------------------------------------------------- */

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222 84% 4.9%;
--primary: 222 47% 11%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222 47% 11%;
--muted: 210 40% 96.1%;
--muted-foreground: 215 16% 47%;
--accent: 210 40% 96.1%;
--accent-foreground: 222 47% 11%;
--destructive: 0 84% 60%;
--destructive-foreground: 210 40% 98%;
--border: 214 32% 91%;
--input: 214 32% 91%;
--ring: 222 84% 4.9%;
--radius: 0.5rem;
}

.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;
--card: 222 47% 11%;
--card-foreground: 210 40% 98%;
--popover: 222 47% 11%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222 47% 11%;
--secondary: 217 33% 17%;
--secondary-foreground: 210 40% 98%;
--muted: 217 33% 17%;
--muted-foreground: 215 20% 65%;
--accent: 217 33% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--border: 217 33% 17%;
--input: 217 33% 17%;
--ring: 213 27% 84%;
}
}

@layer base {

• {
  @apply border-border;
  }
  body {
  @apply bg-background text-foreground;
  }
  }

.theme-black {
--primary: 0 0% 0%;
--primary-foreground: 0 0% 70%;
--secondary: 0 0% 50%;
--secondary-foreground: 0 0% 90%;
--accent: 0 0% 20%;
--accent-foreground: 0 0% 95%;
--ring: 0 0% 0%;
}

.theme-white {
--primary: 0 0% 100%;
--primary-foreground: 0 0% 70%;
--secondary: 0 0% 85%;
--secondary-foreground: 0 0% 55%;
--accent: 0 0% 80%;
--accent-foreground: 0 0% 5%;
--ring: 0 0% 100%;
}

.theme-orange {
--primary: 25 95% 53%;
--primary-foreground: 25 100% 85%;
--secondary: 25 90% 70%;
--secondary-foreground: 25 95% 90%;
--accent: 25 95% 60%;
--accent-foreground: 25 100% 95%;
--ring: 25 95% 53%;
}

.theme-emerald {
--primary: 142 76% 36%;
--primary-foreground: 142 85% 75%;
--secondary: 142 70% 55%;
--secondary-foreground: 142 80% 85%;
--accent: 142 76% 45%;
--accent-foreground: 142 85% 95%;
--ring: 142 76% 36%;
}

.theme-blue {
--primary: 217 91% 60%;
--primary-foreground: 217 95% 85%;
--secondary: 217 85% 75%;
--secondary-foreground: 217 90% 90%;
--accent: 217 91% 70%;
--accent-foreground: 217 95% 96%;
--ring: 217 91% 60%;
}

.theme-purple {
--primary: 271 91% 65%;
--primary-foreground: 271 95% 90%;
--secondary: 271 85% 80%;
--secondary-foreground: 271 90% 95%;
--accent: 271 91% 75%;
--accent-foreground: 271 95% 95%;
--ring: 271 91% 65%;
}

.theme-sapphire {
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 212 95% 68%;
--secondary: 216 92% 60%;
--secondary-foreground: 210 98% 78%;
--accent: 221 83% 65%;
--accent-foreground: 212 95% 95%;
--ring: 221 83% 53%;
}

.theme-ruby {
--primary: 347 77% 50%;
--primary-foreground: 352 83% 91%;
--secondary: 350 80% 72%;
--secondary-foreground: 351 83% 82%;
--accent: 348 79% 60%;
--accent-foreground: 352 85% 95%;
--ring: 347 77% 50%;
}
`.

I want to say, everything is working fine on rest of my application, but not affecting on most of the shadcn components. even none of its subcomponents like title,... are taking theme color like primary, secondary , and so on. basically I can't modify it as i want.

for example `export const TestSheet = () => {
return (

{/* header */}

Header - consuming the primary color

  <Sheet>
    <SheetTrigger>
      <button className="flex items-center space-x-1 hover:text-blue-500">
        <ChatBubbleOvalLeftIcon className="h-4 w-4" aria-hidden="true" />
        <span>{0}</span>
      </button>
    </SheetTrigger>

    <SheetContent className={`max-sm:h-[540px] p-6 `}>
      <SheetHeader>
        <SheetTitle>
          <p className="text-primary">p1 - not consuming the primary color</p>
          <p className="text-cyan-500">p2 - Consuming the cyan color</p>
        </SheetTitle>
        <SheetDescription>Hello</SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</div>

);
};
`
how p1 can take the primary color? here className="text-primary" is working outside the sheet, but not inside the sheet. where text-primary is ".text-primary {
color: hsl(var(--primary));
}"

p1 - not consuming the primary color

is working but "

p1 - not consuming the primary color

" is not working inside the sheet"