Tailwind bg-primary/90 Not Reflecting Updated Primary Color from globals.css

[ronishhh]

Title:

Tailwind bg-primary/90 Not Using Custom Primary Color from globals.css

Description:

I recently updated the primary color in my globals.css file using HSL (16, 61%, 55%). The new color is correctly applied when using classes like bg-primary. However, when I use opacity variants such as bg-primary/90, the color does not reflect the updated value — it still appears to use Tailwind's default blue.

Details:

Here's the relevant portion of my components.json configuration:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils",
    "ui": "~/components/ui",
    "lib": "~/lib",
    "hooks": "~/hooks"
  },
  "iconLibrary": "lucide"
}