HSL and RGB are converted to HEX after build | vite plugin

[OdearOgy]

What version of Tailwind CSS are you using?

v4.1.7

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

@tailwindcss/vite: 4.1.7, vite: 6.3.5

What version of Node.js are you using?

not relevant

What browser are you using?

Brave

What operating system are you using?

MacOS

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-fjmrwyje

Describe your issue
I installed tailwind and the vite plugin, then configured the vite plugin inside vite.config.ts file.

When defining color tokens with the @theme helper and using HSL or HSLA my colors are converted to HEX after build.

If I remove the vite plugin from the config.ts file and rebuild, the colors inside dist/minified.css are preserved.

This happens with hsl, hsla, rgb.
For the oklch it just converts the regular numbers to percentages which is fine.

• Source code

@theme static {
  --color-neutral-300: rgb(123, 44, 128);
  --color-neutral-400: oklch(0.8059 0.0173 256.73);
  --color-primary-500: hsl(220, 90%, 38%);
  --color-primary-600: hsla(220, 90%, 35%, 0.9);
}

• dist/css

/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
@layer theme {
  :root,
  :host {
    --color-neutral-300: #7b2c80;
    --color-neutral-400: oklch(80.59% 0.0173 256.73);
    --color-primary-500: #0a44b8;
    --color-primary-600: #093eaae6;
  }
}

Steps to reproduce

1. Inside your css file create color tokens with rgb, hsl and oklch values.
2. Use static keyword or ommit it and apply the color token classnames directly inside the jsx
3. Add the vite plugin for tailwindcss - @tailwindcss/vite
4. Run build script
5. Check the minified css inside the dist folder, find color token values and confirm that the colors are converted to hex except the oklch colors
6. Disable the vite plugin and do the 4 & 5 again
7. Colors are preserved as is, no conversion.

NOTE:
This only happens on production mode, not dev

[wongjn]

Are you experiencing any problems with the hex values? I assume they should be equivalent to the source values. I assume they are converted in production because minification and transpilation is run only in production and hex values would be shorter.

[OdearOgy]

I can't yet say if there are problems with hex.
I want to have hsl variables without them getting minified, even if it means longer values.

If I remember correctly, in Tailwind v3, there was a way to disable the color minification, but I couldn't do that here because I was using the Vite plugin.

Should I switch to postcss config, or is there a way to configure/disable this exact behavior?

[wongjn]

You can disable minification as a whole with the PostCSS plugin, but no option for colors only.

[OdearOgy]

yeah, I see.
I think I might switch to oklch as it's just a new project, anyway thanks!