RGB generated for local builds, but HSLA on production — causing a noticeable colour difference

[r3oath]

What version of Tailwind CSS are you using?

v3.3.3

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

Next.js 13.4.12

What version of Node.js are you using?

v16.13.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

I cannot provide a reproduction URL as the issue pertains to a difference in output between local and production builds.

Describe your issue

When using a class such as bg-neutral-50/50, the output CSS in a local build is background-color: rgb(23 23 23 / 0.5);, however, on a production build, the output is background-color: hsla(0,0%,9%,.5); which results in a noticeable difference in colour. See the example screenshots below, first is local, second is production:

[adamwathan]

Hey! Please provide a reproduction, Tailwind itself isn’t doing this so it’s particular to your project. A reproduction would be a GitHub project that included a script to do a development build where the issue is not present and another script to create a production build that does demonstrate the issue.

My guess is something in the production pipeline that’s trying to either minify or transpile the CSS to support older browsers.

[adamwathan]

Created a new Next.js project myself and was able to reproduce this but it happens even without using Tailwind at all — for instance this CSS:

html {
  background-color: rgb(250 250 250 / 0.5);
}

...produces this output in a Next.js production build:

html{background-color:hsla(0,0%,98%,.5)}

The source of this appears to be cssnano, which is attempting to minify the RGB color but is doing some rounding in the process:

https://cssnano.co/playground/#eyJpbnB1dCI6Imh0bWwge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjUwIDI1MCAyNTAgLyAwLjUpO1xufSIsImNvbmZpZyI6ImNzc25hbm8tcHJlc2V0LWRlZmF1bHQifQ==

So unfortunately this one isn't our fault and nothing we can do to fix it other than trying to fix cssnano or convince the Next.js team to drop cssnano for a different tool. Will leave this open until I can talk to our team at least so I don't forget about it — I think we can probably fix this in cssnano ourselves.

[adamwathan]

Another note for myself — it looks like we can get around this issue by using 8-digit hex notation for RGB values. This is what cssnano should minify to in my opinion because it's accurate and also shorter, but we can probably do this ourselves as a stop-gap.

https://cssnano.co/playground/#eyJpbnB1dCI6Imh0bWx7YmFja2dyb3VuZC1jb2xvcjojZmFmYWZhODB9IiwiY29uZmlnIjoiY3NzbmFuby1wcmVzZXQtZGVmYXVsdCJ9

[adamwathan]

Opened an issue on Next.js to disabled the colormin optimization in cssnano to avoid losing data like this:

vercel/next.js#53393

For anyone in an environment where they have the ability to configure cssnano directly, you should turn off colormin to prevent this transformation and respect your intended color space:

// .cssnanorc or similar
{
  "preset": [
    "cssnano-preset-default",
    {
      "colormin": false
    }
  ]
}

Going to close this one as not a Tailwind bug for now, hopefully the Next.js PR will be merged and this won't be an issue in Next.js projects anymore 👍

[adamwathan]

I've opened an issue on cssnano as well in case they'd like to make some changes around this upstream, but since they are looking for new maintainers on that package it might be something anyone can easily prioritize right now and might not happen very quickly:

cssnano/cssnano#1515