diff --git a/CHANGELOG.md b/CHANGELOG.md index ebf58d2f7833..af1c57fdffa3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Show suggestions for fractions in IntelliSense ([#16353](https://github.com/tailwindlabs/tailwindcss/pull/16353)) - Don’t replace `_` in suggested theme keys ([#16433](https://github.com/tailwindlabs/tailwindcss/pull/16433)) - Ensure `--default-outline-width` can be used to change the `outline-width` value of the `outline` utility +- Ensure drop shadow utilities don't inherit unexpectedly ([#16471](https://github.com/tailwindlabs/tailwindcss/pull/16471)) ## [4.0.6] - 2025-02-10 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 89a88346694d..90e12bf832ad 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -13407,6 +13407,11 @@ test('filter', async () => { @property --tw-sepia { syntax: "*"; inherits: false + } + + @property --tw-drop-shadow { + syntax: "*"; + inherits: false }" `) expect( diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index c2dd524ab035..28bb0ce41dcd 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3152,6 +3152,7 @@ export function createUtilities(theme: Theme) { property('--tw-opacity'), property('--tw-saturate'), property('--tw-sepia'), + property('--tw-drop-shadow'), ]) } diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 53d8a71c9a48..64057877b7bf 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -410,6 +410,35 @@ test('inset shadow colors', async ({ page }) => { ) }) +test('filter', async ({ page }) => { + let { getPropertyValue } = await render( + page, + html` +
+
+
+ `, + ) + + expect(await getPropertyValue('#a', 'filter')).toEqual( + [ + 'blur(12px)', + 'brightness(0.5)', + 'contrast(0.5)', + 'grayscale(1)', + 'hue-rotate(180deg)', + 'invert(1)', + 'saturate(0.5)', + 'sepia(1)', + 'drop-shadow(rgba(0, 0, 0, 0.12) 0px 3px 3px)', + ].join(' '), + ) + expect(await getPropertyValue('#b', 'filter')).toEqual('contrast(1)') +}) + test('outline style is optional', async ({ page }) => { let { getPropertyValue } = await render( page,