From 6164783124113c704ef5005aaed845b714d2cc7d Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 12 Feb 2025 18:36:03 +0100
Subject: [PATCH] Emit `--tw-drop-shadow` property (#16471)

Fixes #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"
/>
---
 CHANGELOG.md                               |  1 +
 packages/tailwindcss/src/utilities.test.ts |  5 ++++
 packages/tailwindcss/src/utilities.ts      |  1 +
 packages/tailwindcss/tests/ui.spec.ts      | 29 ++++++++++++++++++++++
 4 files changed, 36 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ebf58d2f7..af1c57fdf 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 89a883466..90e12bf83 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 c2dd524ab..28bb0ce41 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 53d8a71c9..64057877b 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`
+      <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,