Upgrading breaks css

[PeterTSmith1997]

I recently upgraded to Tailwind CSS v4 using the upgrade tool, but I’ve encountered an issue with my custom colors. They no longer seem to work as defined in my tailwind.config.js. I even tried adding them directly to my CSS file, but that didn’t resolve the issue either.

For reference, here are my sites:

Old v3 site: code
New v4 site: code
Could you help me figure out what’s causing this issue?

Thanks!

[wongjn]

Your repository seems to be private - I can't seem to access it. Could you make it public please?

[PeterTSmith1997]

Sorry, I thought I had, public now

[wongjn]

Sorry, still showing 404!

[PeterTSmith1997]

Sorry, try now

[wongjn]

In src/index.css, your theme configuration should be inside @theme, not :root:

-:root {
+@theme {
   --color-primary-light: #e3f2fd; /* Light Blue */
   --color-primary: #2196f3; /* Primary Blue */
   --color-primary-dark: #0b79d0; /* Dark Blue */
   --color-secondary: #ffffff; /* White */
 }
 body {

[PeterTSmith1997]

Thanks