Divide utilities between children in Tailwind - Browser Rendering Trace

Render Flow - Divide utilities between children

Read HTML container with children

↓

Apply Tailwind 'divide-x' or 'divide-y'

↓

Insert border between children

↓

Calculate spacing and border size

↓

Render visual dividing lines

↓

Composite final layout

The browser reads the container and its children, then Tailwind's divide utilities add borders between children by inserting border styles on child elements except the first, creating visible dividing lines.

Render Steps - 3 Steps

Code Added:<div class="flex"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>

Before

[Item 1][Item 2][Item 3]

→

After

[Item 1][Item 2][Item 3]

The container is set to flex, so children line up horizontally with no gaps or borders yet.

🔧 Browser Action:Creates flex formatting context, calculates horizontal layout.

Code Sample

A horizontal flex container with vertical dividing lines between each child item.

Tailwind

<div class="flex divide-x divide-gray-400">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Tailwind

.divide-x > * + * {
  border-left-width: 1px;
  border-color: #9CA3AF; /* Tailwind gray-400 */
}

Render Quiz - 3 Questions

After applying step 2 (divide-x), what visual change do you see?

A Borders appear around the entire container

B Vertical lines appear between each child

C Horizontal lines appear between each child

D No visible change

Common Confusions - 3 Topics

Why don't I see dividing lines on the first child?

Divide utilities add borders only between siblings, so the first child has no border on its left (divide-x) or top (divide-y). This avoids double borders.

💡 Borders appear only between children, never before the first or after the last.

Why does the dividing line overlap content sometimes?

If children have no padding, the border may appear too close to text. Adding padding inside children creates space so borders don't overlap content.

💡 Add padding inside children to separate content from dividing lines.

Why doesn't divide-x work on a vertical stack?

Divide-x adds vertical borders between horizontal siblings. For vertical stacks, use divide-y to add horizontal dividing lines.

💡 Use divide-x for horizontal layouts, divide-y for vertical layouts.

Property Reference

Property	Value Applied	Effect	Common Use
divide-x	border-left-width: 1px on siblings	Adds vertical dividing lines between horizontal children	Separate items in horizontal flex or inline layouts
divide-y	border-top-width: 1px on siblings	Adds horizontal dividing lines between vertical children	Separate items in vertical stacks or column layouts
divide-gray-400	border-color: #9CA3AF	Colors the dividing lines medium gray	Visual styling of dividing lines
divide-transparent	border-color: transparent	Removes visible dividing lines but keeps spacing	Invisible separators for spacing

Concept Snapshot

Tailwind's divide utilities add borders between sibling elements. divide-x adds vertical lines between horizontal children. divide-y adds horizontal lines between vertical children. Border color is controlled by divide-{color} classes. Borders appear only between children, not on first or last. Add padding inside children to avoid border overlapping content.