Cannot get custom themes to work in the updated shadcn ui (tailwindv4)

Wanted to try out the custom themes on the shadcn ui website, however when I paste the teams into my index.css (vite project) it does not get applied to my default components. Is there a step am missing.

Note: have followed the docs to configure shadcn with tailwind v4 and it works correctly but applying custom themes do not work. Would appreciate any feedback on this.

Could not retrieve any useful information online

I assume you're using the theme provided at https://ui.shadcn.com/themes, the code that the website provides for copying won't work with Tailwind v4 and React 19. For more details, refer to this discussion https://github.com/shadcn-ui/ui/discussions/6714#discussion-7998742.

I will highlight the key part from that discussion that resolved the issue for me:

Here's how you do it:

1. Move :root and .dark out of the @layer base.

2. Wrap the color values in hsl()

3. Add the inline option to @theme i.e @theme inline {

4. Remove the hsl() wrappers from @theme

The code at https://ui.shadcn.com/themes is in a similar format as:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }
}

Follow the steps and modify it as follows:

:root { /* <-- Moved outside of @layer */
  --background: hsl(0 0% 100%); /* <-- Wrap in hsl */
  --foreground: hsl(0 0% 3.9%);
}