[v4] divide-* class produces extra border on hidden last child element

[mkfizi]

What version of Tailwind CSS are you using?

For example: v4.0.12, v3.4.17

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

For example: Vite 6.1.0

What version of Node.js are you using?

For example: v23.9.0

What browser are you using?

For example: Chrome, Safari

What operating system are you using?

For example: macOS

Reproduction URL

https://play.tailwindcss.com/RJdN8e6ZgV

Describe your issue

I'm building an collapsible accordion component. I noticed current divide-* class produced extra border on last child element. I just upgraded my tailwind dependencies to v4 from v3. This issue does not occur on v3 and below. I'm not sure if this is actually intended or a bug. You may check on reproduction URL and toggle Tailwind versions.

[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;
}

So in your example in v3, all but the first element gets border-top. In v4, all but the last element gets border-bottom.

[mkfizi]

Ah, i see. But this inefficient since I could no longer use divide-* and had to resort with border-* like this

I've tried using arbitrary selector something like [&>*:last-child.hidden.invisible] but just spent the past few hours trying to fix this and seems not worth the effort. Moving forward I guess there's gonna be extra effort when building dynamic elements.

However I will not close this discussion just in case someone or future me had figured this out.

[wongjn]

You can use *:not-first:border-t as an alternative: https://play.tailwindcss.com/kfd9mYPPMR

[mkfizi]

I just come out with this solution but clearly yours is much a better solution. Now I just need to note why *:not-first:border-t is needed. Thanks!