Divide Width

Divide Width is a set of Tailwind CSS classes for borders. You'll find a comprehensive, complete list of all divide width classes below.

Usage Examples

Horizontal Dividers

Item 1
Item 2
Item 3
divide-y divide-gray-400
Item 1
Item 2
Item 3
divide-y-2 divide-blue-400

Vertical Dividers

Item 1
Item 2
Item 3
divide-x divide-gray-400
Item 1
Item 2
Item 3
divide-x-4 divide-red-400

Divide Width Classes

Divide width utilities create separator lines between child elements. They work by adding borders to the right or bottom of child elements, creating visual separation.

The available width values are: 0, 2, 4, and 8 (in pixels).

You can also use divide-x-reverse and divide-y-reverse to reverse the direction of the dividers.

Horizontal Dividers (Y-axis)

divide-y-0
divide-y-2
divide-y-4
divide-y-8
divide-y

Vertical Dividers (X-axis)

divide-x-0
divide-x-2
divide-x-4
divide-x-8
divide-x

Reverse Dividers

divide-y-reverse
divide-x-reverse

Real-world Applications

Navigation Menu

flex divide-x divide-gray-400

List Items

  • First list item
  • Second list item
  • Third list item
  • Fourth list item
divide-y divide-gray-400