does tailwindcss divide width not work for multiple grid rows?

I have a tailwind grid with a set amount of columns. I resize the set amount of columns based on breakpoints.

The amount of items inside the grid is variable.

Now i have to put dividers between the columns that are on the same row.

I tried to use Tailwind's divide width But not getting the results i expected

It puts a border on the first column of the second row aswell, I expected that the divider would reset when a new row was introduced.

Example

<div class="grid grid-cols-2 divide-x-2 lg:grid-cols-4">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
</div>

example in tailwindplay

was i stupid for thinking this would just work? I would like to prevent having to use something like

[&>*:nth-child(even)]:border-l-1

The divide-x-* classes are indeed unsuitable for use with multi-row elements. Essentially, the rule is simple, and largely equivalent to

.divide-x-key * + * {
  border-left: value;
}

If you wanted to avoid using [&>*:nth-child(even)]:border-l-1 et al, you could consider using clip-path to hide the left classes like:

<script src="https://cdn.tailwindcss.com/3.3.7"></script>

<div class="grid grid-cols-2 divide-x-2 lg:grid-cols-4 ml-[calc(theme(divideWidth.2)*-1)] [clip-path:inset(0_0_0_theme(divideWidth.2))]">
  <div class="pl-[theme(divideWidth.2)]">div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
</div>