Divide Width

Use divide-x or divide-y to draw a border between every pair of adjacent children inside a flex or grid container. The border is placed on the inline-end (default) or inline-start (*-reverse) side of every child except the last, mirroring Tailwind v4’s & > :not(:last-child) { border-... } rule.

Between children

Use utilities like divide-x and divide-y-4 to add borders between child elements:

Style('grid grid-cols-3 divide-x-4', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Reversing children order

If your elements are in reverse order (using flex-row-reverse or flex-col-reverse), use divide-x-reverse or divide-y-reverse to keep the dividers between sibling cells:

Style('flex flex-col-reverse divide-y-4 divide-y-reverse divide-indigo-500', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Class reference

Class	Output
divide-x	1px vertical divider between flex/grid children
divide-y	1px horizontal divider between flex/grid children
divide-x-<number>	<number>px vertical divider (open integer scale)
divide-y-<number>	<number>px horizontal divider (open integer scale)
divide-x-reverse	Flips divide-x to the inline-start side; pair with flex-row-reverse
divide-y-reverse	Flips divide-y to the block-start side; pair with flex-col-reverse
divide-x-[<value>] / divide-y-[<value>]	Arbitrary pixel value

Pair with divide-color to set the line color and divide-style for dashed / dotted strokes.