Ensure drop-shadow-* utilities work with theme values containing multiple shadows

[UditDewan]

Fixes #17677

Summary

Theme values for drop-shadow-* that contain multiple shadows currently produce broken CSS unless the user remembers to declare them with @theme inline. Given:

@theme {
  --drop-shadow-multi: 0 0 20px rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.25);
}

drop-shadow-multi generates:

--tw-drop-shadow: drop-shadow(var(--drop-shadow-multi));

which is invalid because the comma-separated list ends up inside a single drop-shadow(…) function — each shadow needs its own drop-shadow(…) wrapper (the sibling --tw-drop-shadow-size declaration already does this correctly).

This PR implements the approach suggested in the issue discussion: when a --drop-shadow-* theme value contains multiple shadows, treat it as if it were declared with @theme inline, since a single var(…) reference can never represent it correctly. The output for the theme value above becomes:

--tw-drop-shadow: drop-shadow(0 0 20px rgb(0 0 0 / 0.2)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));

Single-shadow theme values are unaffected and keep referencing the variable, so overriding them via the cascade continues to work.

Test plan

• Added a non-inline multi-shadow theme value (--drop-shadow-double) to the existing filter test in utilities.test.ts. It now compiles to the same (valid) output as the @theme inline variant — previously it produced the broken single-drop-shadow(…) output described above.
• pnpm vitest run --project tailwindcss — all 4871 tests pass.
• Verified the reproduction from [4.1.4] Multiple drop-shadows are still broken #17677 produces valid CSS after the change.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ad564bcc-02e2-4e47-a914-82ffffdbbfb0

📥 Commits

Reviewing files that changed from the base of the PR and between bdcd708 and 225eeea.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/tailwindcss/src/utilities.test.ts
• packages/tailwindcss/src/utilities.ts

---

Walkthrough

Updated drop-shadow utility resolution to detect comma-separated theme values and use the raw value when generating CSS. Extended utility coverage with a drop-shadow-double theme variable and expected CSS output. Added a changelog entry documenting the multi-shadow fix.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing drop-shadow-* utilities for multi-shadow theme values.
Description check	✅ Passed	The description is directly about the same drop-shadow multi-shadow bug and the implemented fix.
Linked Issues check	✅ Passed	The changes expand multi-shadow theme values into separate drop-shadow(...) functions, matching #17677's objective.
Out of Scope Changes check	✅ Passed	The PR stays focused on the drop-shadow fix, with only tests and a changelog note added.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Confidence Score: 4/5

Safe to merge; the change is small and targeted, and the existing test suite confirms the fix produces valid CSS without breaking any single-shadow or inline multi-shadow paths.

The fix correctly replaces the broken drop-shadow(var(--drop-shadow-multi)) output with properly wrapped individual drop-shadow() calls. The segment utility already respects nested parentheses, so commas inside rgb()/calc() won't be misread as shadow separators. The only finding is a dead resolved = value assignment in the alpha branch, which doesn't affect runtime behavior but could cause confusion when reading the code later.

The alpha-modifier branch in utilities.ts (lines 4701–4715) is worth a closer read to confirm the dead assignment is intentional rather than an accidental omission of the inlining logic in the alpha path.

_{Reviews (1): Last reviewed commit: "Ensure drop-shadow utilities work with t..." | Re-trigger Greptile}

[RobinMalfait]

Hey! Thanks for the PR, but this would introduce a breaking change. The moment multiple shadows are being used in the value, the variable gets removed and inlined. That means that changes to the variable won't work since there is no variable anymore.

I would recommend the workaround of explicitly using @theme inline, more info: #17677 (comment)