Emit --tw-drop-shadow property (tailwindlabs#16471)

Fixes tailwindlabs#16461

Ensure we also emit `@property --tw-drop-shadow`.

## Test plan

```
<div class="drop-shadow-2xl size-72 bg-white">
  <div class="size-48 saturate-100 bg-white"></div>
</div>
```

now only drops one shadow (screenshot from Vite playground):

<img width="562" alt="Screenshot 2025-02-12 at 16 37 25"
src="https://github.com/user-attachments/assets/94eaaf54-6fd5-4d10-9297-9e7523a02602"
/>

Author: philipp-spiess

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
 

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(

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'),
       ])
     }
 

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`
+      <div
+        id="a"
+        class="blur-md brightness-50 contrast-50 drop-shadow-md grayscale hue-rotate-180 invert saturate-50 sepia"
+      >
+        <div id="b" class="contrast-100"></div>
+      </div>
+    `,
+  )
+
+  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,