Skip color-mix(…) when opacity is 100% (#17815)

RobinMalfait · web-flow · commit d2daf5952473 · 2025-04-28T13:30:01.000-04:00
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.
diff --git 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
@@ -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
@@ -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)`
 }
 

Original file line number	Diff line number	Diff line change
`@@ -10695,6 +10695,8 @@ test('bg', async () => {`
`10695`	`10695`	`'bg-red-500/2.75',`
`10696`	`10696`	`'bg-red-500/[0.5]',`
`10697`	`10697`	`'bg-red-500/[50%]',`
	`10698`	`+ 'bg-red-500/100',`
	`10699`	`+ 'bg-red-500/[100%]',`
`10698`	`10700`	`'bg-blue-500',`
`10699`	`10701`	`'bg-current',`
`10700`	`10702`	`'bg-current/50',`
`@@ -10992,6 +10994,10 @@ test('bg', async () => {`
`10992`	`10994`	`}`
`10993`	`10995`	`}`
`10994`	`10996`
	`10997`	`+ .bg-red-500\\/100 {`
	`10998`	`+ background-color: var(--color-red-500);`
	`10999`	`+ }`
	`11000`	`+`
`10995`	`11001`	`.bg-red-500\\/\\[0\\.5\\] {`
`10996`	`11002`	`background-color: #ef444480;`
`10997`	`11003`	`}`
`@@ -11012,6 +11018,10 @@ test('bg', async () => {`
`11012`	`11018`	`}`
`11013`	`11019`	`}`
`11014`	`11020`
	`11021`	`+ .bg-red-500\\/\\[100\\%\\] {`
	`11022`	`+ background-color: var(--color-red-500);`
	`11023`	`+ }`
	`11024`	`+`
`11015`	`11025`	`.bg-transparent {`
`11016`	`11026`	`background-color: #0000;`
`11017`	`11027`	`}`
Original file line number	Diff line number	Diff line change
`@@ -173,6 +173,11 @@ export function withAlpha(value: string, alpha: string): string {`
`173`	`173`	alpha = `${alphaAsNumber * 100}%`
`174`	`174`	`}`
`175`	`175`
	`176`	+ // No need for `color-mix` if the alpha is `100%`
	`177`	`+ if (alpha === '100%') {`
	`178`	`+ return value`
	`179`	`+ }`
	`180`	`+`
`176`	`181`	return `color-mix(in oklab, ${value} ${alpha}, transparent)`
`177`	`182`	`}`
`178`	`183`