diff --git a/CHANGELOG.md b/CHANGELOG.md index 86f78ef39488..0bc26c2fa291 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`, `inset-shadow-inherit`, `drop-shadow-inherit`, and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647)) - Ensure compatibility with array tuples used in `fontSize` JS theme keys ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630)) - Upgrade: Convert `fontSize` array tuple syntax to CSS theme variables ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630)) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index c3af45d3b7ef..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); @@ -23568,12 +23580,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; } @@ -23968,12 +23974,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; } @@ -24447,12 +24447,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 a5254865095b..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)')), @@ -5127,6 +5135,10 @@ 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 @@ -5275,6 +5287,10 @@ 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 @@ -5397,6 +5413,10 @@ 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