Significant performance penalty when using "space-" space between class #13445
-
We noticed in a React app that using the "space between" utility classes (e.g. For example <div class="space-x-1">
<div>
<div>test 0</div>
...
<div>test 9999</div>
</div>
</div> The bizarre thing about this is that the child nodes are not direct descendants of the container that has the I created a repro test case that illustrates this issue https://codesandbox.io/p/sandbox/sharp-faraday-hw99dy?file=%2Fsrc%2FApp.tsx%3A35%2C13 with 10,000 child nodes (two levels inside the container with the To repro
The generated CSS output of the .space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
} I'm assuming the I'm not sure if there's any reasonable workarounds except to not use space between and switch to gap instead, but I'm keen to hear if anyone else has run into this problem. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
Thanks for sharing this, I saw a tweet about something similar to this the other day so it's nice to have a reproduction! You're right, it looks like the We originally used Not sure if we can change this in v3, maybe with a feature flag that you can opt in to if your project is impacted by this (I think it's only really an issue when you have a lot of child nodes). |
Beta Was this translation helpful? Give feedback.
-
Just making a note it also affects Repro https://codesandbox.io/p/sandbox/sharp-faraday-forked-5zf57f |
Beta Was this translation helpful? Give feedback.
-
Here’s the PR to switch to a faster implementation for v4: #13459 |
Beta Was this translation helpful? Give feedback.
Here’s the PR to switch to a faster implementation for v4: #13459