[v4] iOS production performance degradation with space and divide utilities

[jakobpevec]

What version of Tailwind CSS are you using?

For example: v4.1.17

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

Astro

What version of Node.js are you using?

For example: v24.9.0

What browser are you using?

Edge, Safari

What operating system are you using?

macOS, iphone

Describe your issue

When using divide-x and/or space-y-* utilities safari and especially iOS performance degraded severely. Css processing was using 95% of CPU in browser and took several seconds. I traced it down to these utilities, I assume the issue is nested calc statements?

Here is an example of generated code:

    :where(.space-y-6>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 
6) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 6)
 * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-12>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 
12) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 
12) * calc(1 - var(--tw-space-y-reverse)))
    }     :where(.md\:divide-x>:not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * 
var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - 
var(--tw-divide-x-reverse)))
    }

[thecrypticace]

1. Can you provide a reproduction + steps on where/how you observe this performance problem? (It does not need to be minimal — just something we can profile)
2. What iOS device (hardware and iOS version) are you testing on?