From b1fcea889a612f8c03bf1031aaa74626505c5dbb Mon Sep 17 00:00:00 2001 From: wongjn <11310624+wongjn@users.noreply.github.com> Date: Fri, 11 Apr 2025 09:44:16 +0100 Subject: [PATCH 1/4] Ensure `shadow-inherit` inherits the shadow color --- packages/tailwindcss/src/utilities.test.ts | 6 ------ packages/tailwindcss/src/utilities.ts | 7 +++++++ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index c3af45d3b7ef..992b59f7ea81 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -23968,12 +23968,6 @@ test('shadow', async () => { --tw-shadow-color: inherit; } - @supports (color: color-mix(in lab, red, red)) { - .shadow-inherit { - --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent); - } - } - .shadow-red-500 { --tw-shadow-color: #ef4444; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index a5254865095b..60f14104c8f7 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5275,6 +5275,13 @@ export function createUtilities(theme: Theme) { decl('--tw-shadow', nullShadow), decl('box-shadow', cssBoxShadowValue), ] + + case 'inherit': + if (candidate.modifier) return + return [ + boxShadowProperties(), + decl('--tw-shadow-color', 'inherit'), + ] } // Shadow size From 8ec34463b179ad0b8b29337330209dd0fb56b5ce Mon Sep 17 00:00:00 2001 From: wongjn <11310624+wongjn@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:32:42 +0100 Subject: [PATCH 2/4] Fix `inherit` color for other shadow utilities --- packages/tailwindcss/src/utilities.test.ts | 12 ------------ packages/tailwindcss/src/utilities.ts | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 992b59f7ea81..a9b0024750a1 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -23568,12 +23568,6 @@ test('text-shadow', async () => { --tw-text-shadow-color: inherit; } - @supports (color: color-mix(in lab, red, red)) { - .text-shadow-inherit { - --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent); - } - } - .text-shadow-none { text-shadow: none; } @@ -24441,12 +24435,6 @@ test('inset-shadow', async () => { --tw-inset-shadow-color: inherit; } - @supports (color: color-mix(in lab, red, red)) { - .inset-shadow-inherit { - --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent); - } - } - .inset-shadow-red-500 { --tw-inset-shadow-color: #ef4444; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 60f14104c8f7..84852562d601 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -5127,6 +5127,13 @@ export function createUtilities(theme: Theme) { case 'none': if (candidate.modifier) return return [textShadowProperties(), decl('text-shadow', 'none')] + + case 'inherit': + if (candidate.modifier) return + return [ + textShadowProperties(), + decl('--tw-text-shadow-color', 'inherit'), + ] } // Shadow size @@ -5404,6 +5411,13 @@ export function createUtilities(theme: Theme) { decl('--tw-inset-shadow', nullShadow), decl('box-shadow', cssBoxShadowValue), ] + + case 'inherit': + if (candidate.modifier) return + return [ + boxShadowProperties(), + decl('--tw-inset-shadow-color', 'inherit'), + ] } // Shadow size From dfb352f2293f0050af3563c44761c076954554cc Mon Sep 17 00:00:00 2001 From: wongjn <11310624+wongjn@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:37:51 +0100 Subject: [PATCH 3/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ea4c804c13d..3c058da15a85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure the `color-mix(…)` polyfill creates fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562)) - Fix brace expansion in `@source inline('z-{10..0}')` with range going down ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591)) - Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628)) +- Ensure `shadow-inherit`, `drop-shadow-inherit` and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647)) ## [4.1.3] - 2025-04-04 From 2db4afeb4196b5bf11843bc1a0b8cb606d470e71 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 11 Apr 2025 13:21:18 +0200 Subject: [PATCH 4/4] Add fix for `drop-shadow-inherit` --- CHANGELOG.md | 2 +- packages/tailwindcss/src/utilities.test.ts | 12 +++++++++++ packages/tailwindcss/src/utilities.ts | 23 +++++++++++----------- 3 files changed, 24 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c058da15a85..c1457128cba1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure the `color-mix(…)` polyfill creates fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562)) - Fix brace expansion in `@source inline('z-{10..0}')` with range going down ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591)) - Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628)) -- Ensure `shadow-inherit`, `drop-shadow-inherit` and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647)) +- Ensure `shadow-inherit`, `inset-shadow-inherit`, `drop-shadow-inherit`, and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647)) ## [4.1.3] - 2025-04-04 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index a9b0024750a1..619db139febd 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -20943,6 +20943,8 @@ test('filter', async () => { 'drop-shadow-[0_0_red]', 'drop-shadow-red-500', 'drop-shadow-red-500/50', + 'drop-shadow-none', + 'drop-shadow-inherit', 'saturate-0', 'saturate-[1.75]', 'saturate-[var(--value)]', @@ -21046,6 +21048,16 @@ test('filter', async () => { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } + .drop-shadow-none { + --tw-drop-shadow: ; + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + } + + .drop-shadow-inherit { + --tw-drop-shadow-color: inherit; + --tw-drop-shadow: var(--tw-drop-shadow-size); + } + .drop-shadow-red-500 { --tw-drop-shadow-color: #ef4444; --tw-drop-shadow: var(--tw-drop-shadow-size); diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 84852562d601..3bd91af0c09f 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -4399,6 +4399,14 @@ export function createUtilities(theme: Theme) { { let value = resolveThemeColor(candidate, theme, ['--drop-shadow-color', '--color']) if (value) { + if (value === 'inherit') { + return [ + filterProperties(), + decl('--tw-drop-shadow-color', 'inherit'), + decl('--tw-drop-shadow', `var(--tw-drop-shadow-size)`), + ] + } + return [ filterProperties(), decl('--tw-drop-shadow-color', withAlpha(value, 'var(--tw-drop-shadow-alpha)')), @@ -5130,10 +5138,7 @@ export function createUtilities(theme: Theme) { case 'inherit': if (candidate.modifier) return - return [ - textShadowProperties(), - decl('--tw-text-shadow-color', 'inherit'), - ] + return [textShadowProperties(), decl('--tw-text-shadow-color', 'inherit')] } // Shadow size @@ -5285,10 +5290,7 @@ export function createUtilities(theme: Theme) { case 'inherit': if (candidate.modifier) return - return [ - boxShadowProperties(), - decl('--tw-shadow-color', 'inherit'), - ] + return [boxShadowProperties(), decl('--tw-shadow-color', 'inherit')] } // Shadow size @@ -5414,10 +5416,7 @@ export function createUtilities(theme: Theme) { case 'inherit': if (candidate.modifier) return - return [ - boxShadowProperties(), - decl('--tw-inset-shadow-color', 'inherit'), - ] + return [boxShadowProperties(), decl('--tw-inset-shadow-color', 'inherit')] } // Shadow size