divide-* from v4 no longer handles the case where the last child is not visually the last due to ordering

[rozsazoltan]

What version of Tailwind CSS are you using?

v4.1.8

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

Tailwind CLI

Reproduction URL

https://play.tailwindcss.com/m0waYMBKqD

Describe your issue

https://discord.com/channels/486935104384532500/1381708995294925013/1381708995294925013

For example, I want to use it in a flex container where I move the last child to a different position using order; in this case, the divider lines are displayed incorrectly. In v3, it worked correctly (https://play.tailwindcss.com/WZFciT0r4a) due to a different utility declaration.

<div>
  <ul class="grid grid-cols-1 divide-y divide-gray-500">
    <li style="order: 1">Item</li>
    <li style="order: 2">Item</li>
    <li style="order: 3">Item</li>
    <li style="order: 4">Item</li>
    <li style="order: 5">Item</li>
    <li style="order: 7">Item</li>
    <li style="order: 8">Item</li>
    <li style="order: 9">Item</li>
    <li style="order: 10">Item</li>
    <li style="order: 6">Item add after loop</li> <!-- here -->
  </ul>
</div>

Although the issue can be resolved by placing such special elements in front of the special set of 10 items instead of after them: https://play.tailwindcss.com/ybjqBMHTGA, I believe this is still an unexpected behavior.

v4

.divide-y {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
}

v3

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

[wongjn]

This is a side-effect of a breaking change. The docs talk about Space-between but this does apply the same to divide-* too:

Space-between selector

We've changed the selector used by the space-x-* and space-y-* utilities to address serious performance issues on large pages:

/* Before */
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem;
}
/* Now */
.space-y-4 > :not(:last-child) {
  margin-bottom: 1rem;
}

As of note, an inverse situation happens symmetrically in v3: https://play.tailwindcss.com/gBQdsDxkib

[rozsazoltan]

Ah, true, it's the same. I didn't find any mentions about it with "divide" at first glance