Trying to use CSS Variable for shadcn components in Remix

[jsong1437]

Hi everyone, I've been trying to read up and search on how to get this right....

I have a remix app with tw & shadcn. I have cssVariables: true to make use of theme on component.
Tailwind & Shadcn components show up just fine. However, if I try to use bg-primary on some component, or change that value in global css file, I do not see the color. For reference, I'm testing to have
--primary: 222.2 84% 4.9%; to show with bg-primary

root.tsx:

export const links: LinksFunction = () => [ { rel: "stylesheet", href: carouselCss }, { rel: "stylesheet", href: stylesheet }, ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), ];

app/global.css

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

/* @layer base { */
:root {
--background: 222.2 84% 4.9%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
}
`

components.json

{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": false, "tsx": true, "tailwind": { "config": "tailwind.config.js", "css": "app/globals.css", "baseColor": "slate", "cssVariables": true }, "aliases": { "components": "app/components/ui", "utils": "app/lib/utils" } }

This is what happens:

What could I be doing wrong here?