divide utility doesn't work properly when there's a <template> tag in the markup

[greatislander]

What version of Tailwind CSS are you using?

Tailwind v2.2.19

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

postcss v8.4.14, vite v2.9.13

What version of Node.js are you using?

Node v16.15.1

What browser are you using?

Safari 15.6.1, Firefox 104.0

What operating system are you using?

macOS 12.5.1

Reproduction URL

https://codepen.io/greatislander/pen/VwXNqxK

Describe your issue

The divide utility uses the general sibling combinator with :not([hidden]) to ensure that borders are only inserted between visible elements. This doesn't work when using AlpineJS x-for loops as the presence of the (always hidden) <template> element before the loop items causes a border to be added to the first item in the loop.

I'd suggest that it might be worth expanding the :not([hidden]) selector to also include :not(template). I'd be happy to open a PR for this if you agree with my suggestion.

[adamwathan]

Hey! Solution here is to just add hidden to your template element.

<template hidden>
 ...
</template>

We used to specifically target template but changed it a few years ago:

#2642