tailwindcss/packages
Robin Malfait d2daf59524
Skip color-mix(…) when opacity is 100% (#17815)
This PR improves colors with alpha values where the alpha value results
in 100%.

Before this change, a class like `bg-red-500/100` would be generated as:

```css
.bg-red-500\/100 {
  background-color: #ef4444;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-red-500\/100 {
    background-color: color-mix(in oklab, var(--color-red-500) 100%, transparent);
  }
}
```

But we don't need the `color-mix`, or the fallback styles at all in case
the alpha value is 100%.

After this change the `bg-red-500/100` class will generate as:

```css
.bg-red-500\/100 {
  background-color: var(--color-red-500);
}
```

Which is essentially the same as `bg-red-500`, but we can migrate that
away in the future. At least the generated CSS is smaller.

## Test plan

1. Added a test to ensure the generated value doesn't include color-mix
at all.
2025-04-28 13:30:01 -04:00
..
@tailwindcss-browser Prepare v4.1.4 release (#17669) 2025-04-14 17:32:30 +02:00
@tailwindcss-cli Prepare v4.1.4 release (#17669) 2025-04-14 17:32:30 +02:00
@tailwindcss-node Prepare v4.1.4 release (#17669) 2025-04-14 17:32:30 +02:00
@tailwindcss-postcss PostCSS: Improve error recovery (#17754) 2025-04-25 12:02:10 +02:00
@tailwindcss-standalone Prepare v4.1.4 release (#17669) 2025-04-14 17:32:30 +02:00
@tailwindcss-upgrade Pretty print variants starting with @ (#17814) 2025-04-28 13:25:04 -04:00
@tailwindcss-vite Prepare v4.1.4 release (#17669) 2025-04-14 17:32:30 +02:00
internal-example-plugin Prefix internal modules with internal-* (#14074) 2024-07-29 10:58:07 -04:00
tailwindcss Skip color-mix(…) when opacity is 100% (#17815) 2025-04-28 13:30:01 -04:00
tsconfig.base.json Improve debug logs (#15303) 2024-12-11 15:27:20 +01:00