diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a5393eac2ec..9126b72f7963 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 1b7cf00edd16..419e6373a27d 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 40050cfd2ab1..3c9a189c1af2 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)` }