From d2daf5952473b80b8bbd7393e256a30ee2fa7eaa Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 28 Apr 2025 19:30:01 +0200
Subject: [PATCH] =?UTF-8?q?Skip=20`color-mix(=E2=80=A6)`=20when=20opacity?=
 =?UTF-8?q?=20is=20`100%`=20(#17815)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 CHANGELOG.md                               |  1 +
 packages/tailwindcss/src/utilities.test.ts | 10 ++++++++++
 packages/tailwindcss/src/utilities.ts      |  5 +++++
 3 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a5393eac..9126b72f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgrade: Bump all Tailwind CSS related dependencies during upgrade ([#17763](https://github.com/tailwindlabs/tailwindcss/pull/17763))
 - PostCSS: Ensure that errors in stylesheet dependencies are recoverable ([#17754](https://github.com/tailwindlabs/tailwindcss/pull/17754))
 - Upgrade: Correctly print variants starting with `@` ([#17814](https://github.com/tailwindlabs/tailwindcss/pull/17814))
+- Skip `color-mix(…)` when opacity is `100%` ([#17815](https://github.com/tailwindlabs/tailwindcss/pull/17815))
 
 ## [4.1.4] - 2025-04-14
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 1b7cf00ed..419e6373a 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10695,6 +10695,8 @@ test('bg', async () => {
         'bg-red-500/2.75',
         'bg-red-500/[0.5]',
         'bg-red-500/[50%]',
+        'bg-red-500/100',
+        'bg-red-500/[100%]',
         'bg-blue-500',
         'bg-current',
         'bg-current/50',
@@ -10992,6 +10994,10 @@ test('bg', async () => {
       }
     }
 
+    .bg-red-500\\/100 {
+      background-color: var(--color-red-500);
+    }
+
     .bg-red-500\\/\\[0\\.5\\] {
       background-color: #ef444480;
     }
@@ -11012,6 +11018,10 @@ test('bg', async () => {
       }
     }
 
+    .bg-red-500\\/\\[100\\%\\] {
+      background-color: var(--color-red-500);
+    }
+
     .bg-transparent {
       background-color: #0000;
     }
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 40050cfd2..3c9a189c1 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -173,6 +173,11 @@ export function withAlpha(value: string, alpha: string): string {
     alpha = `${alphaAsNumber * 100}%`
   }
 
+  // No need for `color-mix` if the alpha is `100%`
+  if (alpha === '100%') {
+    return value
+  }
+
   return `color-mix(in oklab, ${value} ${alpha}, transparent)`
 }