Skip to content

calc multiplication becomes invalid division when built #19914

@Stadly

Description

@Stadly

What version of Tailwind CSS are you using?

v4.2.2

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

Vite 7.2.2

What version of Node.js are you using?

v22.22.0

What browser are you using?

N/A

What operating system are you using?

WSL, StackBlitz

Reproduction URL

https://stackblitz.com/edit/sveltejs-kit-template-default-yqt3mekh?file=src%2Froutes%2F%2Bpage.svelte

Describe your issue

The class min-h-[calc(min(var(--file-count),3)*2.5rem+(min(var(--file-count),3)-1)*0.25rem+1.7rem)] is converted to min-height: calc(min(var(--file-count), 3) * 2.5rem + (min(var(--file-count), 3) - 1) * 0.25rem + 1.7rem) in development. That works well. But when building the application, it is converted to min-height:calc(min(var(--file-count),3)/.4rem + (min(var(--file-count),3) - 1)/4rem + 1.7rem). That does not work, since calc division requires a unitless divisor.

Metadata

Metadata

Assignees

Labels

upstreamIssues that need to be fixed in upstream providers (e.g. lightningcss, vite, `@parcel/watcher`).

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