Vite plugin converts HSL and RGB colors to HEX during build

[mamiu]

What version of Tailwind CSS are you using?

For example: v4.1.7

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

For example: SevlteKit 2.21.1, Vite 6.3.5, @sveltejs/vite-plugin-svelte 5.0.3

What version of Node.js are you using?

Not relevant

What browser are you using?

For example: Chrome, Arc, Brave

What operating system are you using?

For example: macOS

Reproduction URL

Not happening in Tailwind Play, only with Vite plugin.

Here's a link to Tailwind Play where it works correctly (I guess Tailwind Play doesn't use the Vite plugin): https://play.tailwindcss.com/wd6xBLjL8R

Describe your issue

The Vite plugin converts HSL and RGB colors to HEX during build. This can cause problems, as you can see in the example below:

We have a SvelteKit app.

This is the vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()]
});

In our app.css we have some gradient stops for the primary color.

@theme inline {
  /* Common Tailwind gradient stops for primary color */
  --color-primary-50: color-mix(in hsl, var(--primary) 7%, hsl(193deg 100% 100%) 93%);
  --color-primary-100: color-mix(in hsl, var(--primary) 20%, hsl(193deg 100% 100%) 80%);
  --color-primary-200: color-mix(in hsl, var(--primary) 40%, hsl(193deg 100% 100%) 60%);
  --color-primary-300: color-mix(in hsl, var(--primary) 60%, hsl(193deg 100% 100%) 40%);
  --color-primary-400: color-mix(in hsl, var(--primary) 80%, hsl(193deg 100% 100%) 20%);
  --color-primary-500: var(--primary);
  --color-primary-600: color-mix(in hsl, var(--primary) 90%, hsl(193deg 0% 0%) 10%);
  --color-primary-700: color-mix(in hsl, var(--primary) 78%, hsl(193deg 0% 0%) 22%);
  --color-primary-800: color-mix(in hsl, var(--primary) 65%, hsl(193deg 0% 0%) 35%);
  --color-primary-900: color-mix(in hsl, var(--primary) 50%, hsl(193deg 0% 0%) 50%);
  --color-primary-950: color-mix(in hsl, var(--primary) 35%, hsl(193deg 0% 0%) 65%);
}

With this we can use gradient stops for the primary color the same way as with the default Tailwind colors.

When I use the class border-primary-200, I get this code in my dev environment:

.border-primary-200 {
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in hsl, var(--primary) 40%, hsl(193deg 100% 100%) 60%);
    }
}

Which looks as expected:

But in the prod environment the color-mix doesn't work correctly anymore:

@supports (color:color-mix(in lab,red,red)) {
    .border-primary-200 {
        border-color: color-mix(in hsl, var(--primary) 40%, #fff 60%);
    }
}

As you can see the border color for the box in the center looks different:

[thecrypticace]

Looks like lightning CSS is the cause here: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%3Aroot%20%7B%5Cn%20%20--primary%3A%20oklch(0.72%200.13%20224.09)%3B%20%5Cn%7D%5Cn%5Cn.foo%20%7B%5Cn%20%20margin%3A%201.5rem%3B%5Cn%20%20padding%3A%201.5rem%3B%5Cn%20%20background%3A%20color-mix(in%20hsl%2C%20var(--primary)%2040%25%2C%20hsl(193deg%20100%25%20100%25)%2060%25)%3B%5Cn%7D%5Cn%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

I think normally it'd be fine to convert the color to hex but apparently not in this case.

[thecrypticace]

Looks like there's an open issue about a similar-ish problem — I left a comment there with some details: parcel-bundler/lightningcss#618 (comment)

I did some additional testing and some other tools like cssnano also make the same transformation.

Unfortunately, there's not a way to disable optimization/minification in the Vite plugin currently.

[thecrypticace]

A possible work around would be to use color-mix with in srgb instead. The results aren't quite the same though — they're slightly less "intense".