Cannot override default colours in v4

[zommerberg]

What version of Tailwind CSS are you using?

"tailwindcss": "^4.0.0-beta.7",

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15

What version of Node.js are you using?

v22

What browser are you using?

N/A

What operating system are you using?

Windows

Describe your issue

Overriding the default colors is not possible, here is example theme config:

This leads to the color config being ignored.

@theme {
--color-neutral-50: oklch(var(--my-custom-neutral-50));
--color-neutral-100: oklch(var(--my-custom-neutral-100));
--color-neutral-200: oklch(var(--my-custom-neutral-200));
--color-neutral-300: oklch(var(--my-custom-neutral-300));
--color-neutral-400: oklch(var(--my-custom-neutral-400));
--color-neutral-500: oklch(var(--my-custom-neutral-500));
--color-neutral-600: oklch(var(--my-custom-neutral-600));
--color-neutral-700: oklch(var(--my-custom-neutral-700));
--color-neutral-800: oklch(var(--my-custom-neutral-800));
--color-neutral-900: oklch(var(--my-custom-neutral-900));
--color-neutral-950: oklch(var(--my-custom-neutral-950));
}

The only way i can make it work is by renaming it to v2neutral:

@theme {
--color-v2neutral-50: oklch(var(--my-custom-neutral-50));
--color-v2neutral-100: oklch(var(--my-custom-neutral-100));
--color-v2neutral-200: oklch(var(--my-custom-neutral-200));
--color-v2neutral-300: oklch(var(--my-custom-neutral-300));
--color-v2neutral-400: oklch(var(--my-custom-neutral-400));
--color-v2neutral-500: oklch(var(--my-custom-neutral-500));
--color-v2neutral-600: oklch(var(--my-custom-neutral-600));
--color-v2neutral-700: oklch(var(--my-custom-neutral-700));
--color-v2neutral-800: oklch(var(--my-custom-neutral-800));
--color-v2neutral-900: oklch(var(--my-custom-neutral-900));
--color-v2neutral-950: oklch(var(--my-custom-neutral-950));
}

[philipp-spiess]

Hey! Do you mind sharing your full CSS file? @theme blocks are applied in order so one suspicion I have is that you import your custom overwrites before importing the defaults, something like this:

@import './myTheme.css'
@import 'tailwindcss'

In that case the colors defined in tailwindcss can indeed overwrite the defaults.

[zommerberg]

thanks, i am working in a monorepo and that was the case