Skip to content

Custom Drop Shadows with calc(...) widths break when combined with a drop-shadow-[color] utility. #20065

@Aurailus

Description

@Aurailus

What version of Tailwind CSS are you using?

v4.3.0

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

postcss 8.5.8

What version of Node.js are you using?

v26.1.0

What browser are you using?

Chrome

What operating system are you using?

Arch Linux

Reproduction URL

https://play.tailwindcss.com/hmGRLYCbyv

Describe your issue

There's an issue with parsing custom drop shadows of the form --drop-shadow-broken: 0 0 calc(1 * var(--spacing)) black;, where the calc(...) value is interpreted as the color, and the generated CSS is broken. it works fine without a color specified, but as soon as you do specify it, it overwrites the calc(...) with the color variable and the shadow breaks.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions