hsl colors rendering issue with v4

[ritiksharmarj]

I have defined colors inside the theme like this -

@theme {
  --color-background: oklch(1 0 0);
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(240 3.7% 15.9%);
}

@layer base {
  :root {
    --foreground: 240 3.7% 15.9%;
  }
}

Only the background and foreground work, not the others. Why? Is there something I'm missing?

[wongjn]

It seems to be working in this Tailwind Play at least. Would you be able to provide a Tailwind Play or a git repo that reproduces your issue please?

[ritiksharmarj]

I am using Next.js 15 with --turbopack. I just checked that when I remove turbopack from the package.json dev, it works fine.

[Inventoris]

@ritiksharmarj that's exactly how it should be, so the short answer is: you use Turbopack, which also does CSS optimization, one of its aspects is simplifying color values. Under the hood, this is done by Lightning CSS.

hsl(0 0% 100%) means pure white. Turbopack automatically converts it to #fff, as it is a shorter notation. Also, according to the documentation, this only happens in development mode:

Turbopack currently only supports next dev and does not support next build. We are currently working on support for builds as we move closer towards stability.

[ritiksharmarj]

@Inventoris got it but why does it only convert --color-card and --color-card-foreground? It should also convert --color-background then in turbopack.

[Inventoris]

@ritiksharmarj I think the answer to this is somewhere in the Lightning CSS implementation...