Poor performance of space-* classes (:where(& > :not(:last-child)))

[nathanael-ruf]

What version of Tailwind CSS are you using?

4.1.12

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

Vite 6.3.5

What version of Node.js are you using?

22.15.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

I tried to reproduce in Tailwind Play, but it seems like that it not actually using tailwind v4 if v4 is selected. If you check the generated css file in the browser on that page it includes

! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com

I hence cannot provide a tailwind play link (bug it not reproducible in v3, because the generated selectors are different)

If I'm wrong about the above, let me know and I'll try again.

Describe your issue

All the space-* classes (like space-y-1) result in css like this

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

The problem is that this selector :where(& > :not(:last-child)) is expensive for the browser to evaluate/match.
I have a relatively large DOM (a codemirror editor with file open that has many long lines, a real world example could be a javascript bundle file) and a single recalculate style run takes ~50ms for me which (if a few are triggered) can cause a noticeable delay on user action.

With "enable css selector stats" chrome reports

so the space selectors take up the largest chunk (there are other issues that I'm solving separately, the second one is another tailwind generated css selector, but that one I use only once and can just avoid).

Another note: There are 403875 match attempts, but "only" 26925 elements affected (dom size). 403875/26925 is exactly 15 and 15 is the number of different space-* classes I use in my project.

I know that the performance of recalculate style depends on selectors and dom size, but since I can't realistically reduce the dom size (codemirror already has virtualized scrolling), I thought I'll ask here to see if anyone has an idea for a more performant selector for the space classes.

[RobinMalfait]

Tailwind Play does use Tailwind CSS v4 when selecting v4 from the dropdown (selected by default). Notice the comment on the generated tab.

If you still see v3, it might be that you switched between versions and that the CSS was still compiling but that should only take a brief second.

My guess is that you were looking at the CSS of the Tailwind Play application itself, not the CSS for the iframe on the right. You can check the Generated CSS tab to see the compiled CSS:

That said, I don't think there is a lot we can do here to optimize this selector I'm afraid.

What I would recommend instead is to change the parent to a grid or flex layout, and then use gap-y-1 instead of space-y-1 and see if that improves performance.

[nathanael-ruf]

I was afraid that'd be the response, but wanted to try anyway.
Thanks for the quick response.

About the play issue: You are probably right, I looked at the wrong css. Was just strange that I saw only the older v3 selectors in the performance dev tools. But anyway, doesn't matter if nothing much can be done.

Thanks again.

[gordey4doronin]

For the record.
The perf issue was reported in the past (#13459, #13445).
And that's where it was switched from :not([hidden]) ~ :not([hidden]) to :not(:last-child) selector.
And the :not(:last-child) selector according to Adam's comment is 2000x faster already.
So, that's already an optimized version.

Sad that no further optimization seem possible.
Thank you @RobinMalfait!