diff --git a/CHANGELOG.md b/CHANGELOG.md index e64c196b2041..7ba96dab57b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Don't rely on `@layer base` for the `@property` polyfills ([#17506](https://github.com/tailwindlabs/tailwindcss/pull/17506)) +- Fix multi-value inset shadow ([#17523](https://github.com/tailwindlabs/tailwindcss/pull/17523)) ## [4.1.1] - 2025-04-02 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index be5becf61027..fd75f6a94919 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -23263,11 +23263,13 @@ test('inset-shadow', async () => { 'inset-shadow-[10px_10px]', 'inset-shadow-[var(--value)]', 'inset-shadow-[shadow:var(--value)]', + 'inset-shadow-[12px_12px_#0088cc,12px_12px_var(--value,#0088cc)]', 'inset-shadow-sm/25', 'inset-shadow-[12px_12px_#0088cc]/25', 'inset-shadow-[12px_12px_var(--value)]/25', 'inset-shadow-[10px_10px]/25', + 'inset-shadow-[12px_12px_#0088cc,12px_12px_var(--value,#0088cc)]/25', // Colors 'inset-shadow-red-500', @@ -23319,6 +23321,18 @@ test('inset-shadow', async () => { --color-red-500: #ef4444; } + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { + --tw-inset-shadow-alpha: 25%; + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + + @supports (color: lab(from red l a b)) { + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\]\\/25 { + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25)), inset 12px 12px var(--tw-inset-shadow-color, oklab(from var(--value, #08c) l a b / 25%)); + } + } + .inset-shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 { --tw-inset-shadow-alpha: 25%; --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, var(--value)); @@ -23359,6 +23373,11 @@ test('inset-shadow', async () => { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .inset-shadow-\\[12px_12px_\\#0088cc\\,12px_12px_var\\(--value\\,\\#0088cc\\)\\] { + --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c), inset 12px 12px var(--tw-inset-shadow-color, var(--value, #08c)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .inset-shadow-\\[12px_12px_\\#0088cc\\] { --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index a4359c53a1ab..88f9a1fbc13b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -6183,13 +6183,20 @@ function alphaReplacedShadowProperties( return varInjector(replaceAlpha(color, alpha)) }) + function applyPrefix(x: string) { + if (!prefix) return x + return segment(x, ',') + .map((value) => prefix + value) + .join(',') + } + if (requiresFallback) { return [ - decl(property, prefix + replaceShadowColors(value, varInjector)), - rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]), + decl(property, applyPrefix(replaceShadowColors(value, varInjector))), + rule('@supports (color: lab(from red l a b))', [decl(property, applyPrefix(replacedValue))]), ] } else { - return [decl(property, prefix + replacedValue)] + return [decl(property, applyPrefix(replacedValue))] } }