[4.1.4] Multiple drop-shadows are still broken

[dmitrc]

What version of Tailwind CSS are you using?

v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js v15.3.0

What version of Node.js are you using?

v22.14.0

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/CgUI30hrFk?file=css

Describe your issue

Seems like the multiple drop-shadow are still not working after the fix from #17515 (tagging @thecrypticace for awareness).

Given this theme token:

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

You get the following CSS output:

.drop-shadow-multi {
    --tw-drop-shadow-size: drop-shadow(0 0 20px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.2))) drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.25)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-multi));
    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);
}

Note how --tw-drop-shadow-size contains the properly expanded shadows (where each segment is wrapped in drop-shadow(...)), while the resulting --tw-drop-shadow ignores that prior declaration and simply refers to the underlying theme variable (which is comma-separated and does not work).

[thecrypticace]

Hey! So this is working as expected. To use multiple drop shadows in 4.0 (and in 4.1) you have to mark the theme value as inline. (via @theme inline). The default drop-shadow utility is defined within @theme inline and that was broken in v4.1.0 — which is what #17515 fixed.

I don't think we want to change this because that would break backwards compatibility for anyone changing something like --drop-shadow-multi via the cascade (e.g. <div class="[--drop-shadow-multi:0_0_3px_black]">…</div>). This is also why I didn't change this behavior.

@adamwathan Any thoughts on whether or not we want (or even can) change this?

[dmitrc]

Thank you for the quick reply!

Hey! So this is working as expected. To use multiple drop shadows in 4.0 (and in 4.1) you have to mark the theme value as inline. (via @theme inline). The default drop-shadow utility is defined within @theme inline and that was broken in v4.1.0 — which is what #17515 fixed.

Oh, that's interesting, thanks for pointing it out! It might be worth updating the docs to add a small section re: considerations for multiple shadows usage.

I will try making that specific part of the theme inline and see if there are any implications to it.

UPD: It works great, thanks! 🎉

[philipp-spiess]

@thecrypticace Maybe we can automatically add these multiple drop shadows as @theme inline so it's a bit less confusing when things don't work?

I don't think we want to change this because that would break backwards compatibility for anyone

Hmm arguable it wouldn't work to begin with but yeah if you relied solely on the cascade that would break things in a confusing way.

[thecrypticace]

@philipp-spiess it'll work as long as you stick to single shadows tho — and even if you defined multiple (which doesn't work) you can still override with a single one in the cascade.

Maybe the presence of multiple drop shadows in the theme key is enough to say "okay it's inline now". Do we have anything where the value of a theme key causes it to act as inline?

Like you could say --color-red: 5px and it'll act just as it did before. It's obviously not valid but you can still do --colot-red: #f30 on a div afterwards

[IsmeetKachhap007]

// tailwind.config.js module.exports = { theme: { extend: { dropShadow: { 'custom-lg': [ '0 10px 8px rgba(0, 0, 0, 0.1)', '0 4px 3px rgba(0, 0, 0, 0.06)', ], }, }, }, };

To fix the issue, mark your theme variable as @theme inline or use array syntax in your config.

This might work.