fix

wip

wip

Author: thecrypticace

packages/tailwindcss/src/utilities.test.ts

@@ -20366,6 +20366,9 @@ test('filter', async () => {
           --drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
           --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
         }
+        @theme inline {
+          --drop-shadow-multi: 0 1px 1px rgb(0 0 0 / 0.05), 0 9px 7px rgb(0 0 0 / 0.1);
+        }
         @tailwind utilities;
       `,
       [
@@ -20392,6 +20395,7 @@ test('filter', async () => {
         'drop-shadow',
         'drop-shadow/25',
         'drop-shadow-xl',
+        'drop-shadow-multi',
         'drop-shadow-[0_0_red]',
         'drop-shadow-red-500',
         'drop-shadow-red-500/50',
@@ -20486,6 +20490,12 @@ 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-multi {
+      --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
+      --tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a);
+      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));

packages/tailwindcss/src/utilities.ts

@@ -4298,7 +4298,8 @@ export function createUtilities(theme: Theme) {
 
       if (!candidate.value) {
         let value = theme.get(['--drop-shadow'])
-        if (value === null) return
+        let resolved = theme.resolve(null, ['--drop-shadow'])
+        if (value === null || resolved === null) return
 
         return [
           filterProperties(),
@@ -4309,7 +4310,12 @@ export function createUtilities(theme: Theme) {
             alpha,
             (color) => `var(--tw-drop-shadow-color, ${color})`,
           ),
-          decl('--tw-drop-shadow', `drop-shadow(${theme.resolve(null, ['--drop-shadow'])})`),
+          decl(
+            '--tw-drop-shadow',
+            segment(resolved, ',')
+              .map((value) => `drop-shadow(${value})`)
+              .join(' '),
+          ),
           decl('filter', cssFilterValue),
         ]
       }
@@ -4350,7 +4356,8 @@ export function createUtilities(theme: Theme) {
       // Shadow size
       {
         let value = theme.get([`--drop-shadow-${candidate.value.value}`])
-        if (value) {
+        let resolved = theme.resolve(candidate.value.value, ['--drop-shadow'])
+        if (value && resolved) {
           if (candidate.modifier && !alpha) return
 
           if (alpha) {
@@ -4379,7 +4386,9 @@ export function createUtilities(theme: Theme) {
             ),
             decl(
               '--tw-drop-shadow',
-              `drop-shadow(${theme.resolve(candidate.value.value, ['--drop-shadow'])})`,
+              segment(resolved, ',')
+                .map((value) => `drop-shadow(${value})`)
+                .join(' '),
             ),
             decl('filter', cssFilterValue),
           ]