Add drop-shadow-* color support (#17434)

This PR adds support for two things:

- New `drop-shadow-{color}` utilities which can be used to control the
filder drop shadow color
- New `drop-shadow-*/{alpha}` utilities which can be used to control the
intensity of the drop shadow

Note that drop-shadow-* utilities without a modifier use variables from
your theme.

If you opt into using drop shadow colors or drop-shadow "intensity"
utilities we will inline these values into your CSS when using a drop
shadow color or drop shadow intensity utility and as such can't be
changed by changing the theme variables on a per-element/tree basis.

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

Diff for: CHANGELOG.md

@@ -26,6 +26,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
 - Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398))
 - Added new `object-{top,bottom}-{left,right}` utilities ([#17437](https://github.com/tailwindlabs/tailwindcss/pull/17437))
+- Added new `drop-shadow-{color}` utilities ([#17434](https://github.com/tailwindlabs/tailwindcss/pull/17434))
+- Added new `drop-shadow-*/{alpha}` utilities to control drop shadow opacity ([#17434](https://github.com/tailwindlabs/tailwindcss/pull/17434))
 
 ### Fixed
 

Diff for: packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -3984,8 +3984,74 @@ exports[`getClassList 1`] = `
   "divide-y-4",
   "divide-y-8",
   "divide-y-reverse",
+  "drop-shadow-current",
+  "drop-shadow-current/0",
+  "drop-shadow-current/5",
+  "drop-shadow-current/10",
+  "drop-shadow-current/15",
+  "drop-shadow-current/20",
+  "drop-shadow-current/25",
+  "drop-shadow-current/30",
+  "drop-shadow-current/35",
+  "drop-shadow-current/40",
+  "drop-shadow-current/45",
+  "drop-shadow-current/50",
+  "drop-shadow-current/55",
+  "drop-shadow-current/60",
+  "drop-shadow-current/65",
+  "drop-shadow-current/70",
+  "drop-shadow-current/75",
+  "drop-shadow-current/80",
+  "drop-shadow-current/85",
+  "drop-shadow-current/90",
+  "drop-shadow-current/95",
+  "drop-shadow-current/100",
+  "drop-shadow-inherit",
+  "drop-shadow-inherit/0",
+  "drop-shadow-inherit/5",
+  "drop-shadow-inherit/10",
+  "drop-shadow-inherit/15",
+  "drop-shadow-inherit/20",
+  "drop-shadow-inherit/25",
+  "drop-shadow-inherit/30",
+  "drop-shadow-inherit/35",
+  "drop-shadow-inherit/40",
+  "drop-shadow-inherit/45",
+  "drop-shadow-inherit/50",
+  "drop-shadow-inherit/55",
+  "drop-shadow-inherit/60",
+  "drop-shadow-inherit/65",
+  "drop-shadow-inherit/70",
+  "drop-shadow-inherit/75",
+  "drop-shadow-inherit/80",
+  "drop-shadow-inherit/85",
+  "drop-shadow-inherit/90",
+  "drop-shadow-inherit/95",
+  "drop-shadow-inherit/100",
   "drop-shadow-none",
   "drop-shadow-sm",
+  "drop-shadow-transparent",
+  "drop-shadow-transparent/0",
+  "drop-shadow-transparent/5",
+  "drop-shadow-transparent/10",
+  "drop-shadow-transparent/15",
+  "drop-shadow-transparent/20",
+  "drop-shadow-transparent/25",
+  "drop-shadow-transparent/30",
+  "drop-shadow-transparent/35",
+  "drop-shadow-transparent/40",
+  "drop-shadow-transparent/45",
+  "drop-shadow-transparent/50",
+  "drop-shadow-transparent/55",
+  "drop-shadow-transparent/60",
+  "drop-shadow-transparent/65",
+  "drop-shadow-transparent/70",
+  "drop-shadow-transparent/75",
+  "drop-shadow-transparent/80",
+  "drop-shadow-transparent/85",
+  "drop-shadow-transparent/90",
+  "drop-shadow-transparent/95",
+  "drop-shadow-transparent/100",
   "duration-75",
   "duration-100",
   "duration-150",

Diff for: packages/tailwindcss/src/utilities.test.ts

@@ -20362,6 +20362,7 @@ test('filter', async () => {
       css`
         @theme {
           --blur-xl: 24px;
+          --color-red-500: #ef4444;
           --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
           --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
         }
@@ -20389,8 +20390,11 @@ test('filter', async () => {
         'invert-0',
         'invert-[var(--value)]',
         'drop-shadow',
+        'drop-shadow/25',
         'drop-shadow-xl',
         'drop-shadow-[0_0_red]',
+        'drop-shadow-red-500',
+        'drop-shadow-red-500/50',
         'saturate-0',
         'saturate-[1.75]',
         'saturate-[var(--value)]',
@@ -20414,12 +20418,16 @@ test('filter', async () => {
           --tw-saturate: initial;
           --tw-sepia: initial;
           --tw-drop-shadow: initial;
+          --tw-drop-shadow-color: initial;
+          --tw-drop-shadow-alpha: 100%;
+          --tw-drop-shadow-size: initial;
         }
       }
     }
 
     :root, :host {
       --blur-xl: 24px;
+      --color-red-500: #ef4444;
       --drop-shadow: 0 1px 1px #0000000d;
       --drop-shadow-xl: 0 9px 7px #0000001a;
     }
@@ -20459,21 +20467,53 @@ 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\\/25 {
+      --tw-drop-shadow-alpha: 25%;
+      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25)));
+      --tw-drop-shadow: drop-shadow(var(--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 {
+      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d));
       --tw-drop-shadow: drop-shadow(var(--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-\\[0_0_red\\] {
-      --tw-drop-shadow: drop-shadow(0 0 red);
+      --tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, red));
+      --tw-drop-shadow: var(--tw-drop-shadow-size);
       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-xl {
+      --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
       --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
       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-red-500 {
+      --tw-drop-shadow-color: color-mix(in srgb, #ef4444 var(--tw-drop-shadow-alpha), transparent);
+      --tw-drop-shadow: var(--tw-drop-shadow-size);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .drop-shadow-red-500 {
+        --tw-drop-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-drop-shadow-alpha), transparent);
+      }
+    }
+
+    .drop-shadow-red-500\\/50 {
+      --tw-drop-shadow-color: color-mix(in srgb, #ef444480 var(--tw-drop-shadow-alpha), transparent);
+      --tw-drop-shadow: var(--tw-drop-shadow-size);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .drop-shadow-red-500\\/50 {
+        --tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent);
+      }
+    }
+
     .grayscale {
       --tw-grayscale: grayscale(100%);
       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, );
@@ -20619,6 +20659,22 @@ test('filter', async () => {
     @property --tw-drop-shadow {
       syntax: "*";
       inherits: false
+    }
+
+    @property --tw-drop-shadow-color {
+      syntax: "*";
+      inherits: false
+    }
+
+    @property --tw-drop-shadow-alpha {
+      syntax: "<percentage>";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-drop-shadow-size {
+      syntax: "*";
+      inherits: false
     }"
   `)
   expect(
@@ -20650,6 +20706,15 @@ test('filter', async () => {
       'invert-unknown',
       '-drop-shadow-xl',
       '-drop-shadow-[0_0_red]',
+
+      'drop-shadow/foo',
+      '-drop-shadow/foo',
+      '-drop-shadow/25',
+      '-drop-shadow-red-500',
+      'drop-shadow-red-500/foo',
+      '-drop-shadow-red-500/foo',
+      '-drop-shadow-red-500/50',
+
       '-saturate-0',
       'saturate--5',
       '-saturate-[1.75]',