Tailwind CSS Divide Cheatsheet

Complete Tailwind v4 divide utilities reference. Add borders between child elements with divide-x, divide-y, and style utilities.
Click any class to copy to clipboard.

Quick Navigation

Divide Y (Vertical)Divide X (Horizontal)Divide Style Divide Color Practical Examples Divide vs Border FAQ

How Divide Utilities Work

Tailwind's divide utilities add borders between child elements, not around them. They use CSS selectors to target all children except the first, creating the appearance of separators.

divide-y

Adds horizontal lines between vertically stacked items

divide-x

Adds vertical lines between horizontally placed items

Divide Width Y (Vertical Stacks)

Class	CSS / Description
`divide-y-0`	`border-block-start-width: 0px`
`divide-y`	`border-block-start-width: 1px`
`divide-y-2`	`border-block-start-width: 2px`
`divide-y-4`	`border-block-start-width: 4px`
`divide-y-8`	`border-block-start-width: 8px`
`divide-y-reverse`	`Reverses divide direction`

Vertical Dividers (divide-y) - Visual Examples

Use divide-y for stacked layouts. Dividers appear between items.

divide-y

Item 1

Item 2

Item 3

divide-y-2

Item 1

Item 2

Item 3

divide-y-4

Item 1

Item 2

Item 3

Divide Width X (Horizontal Rows)

Class	CSS / Description
`divide-x-0`	`border-inline-start-width: 0px`
`divide-x`	`border-inline-start-width: 1px`
`divide-x-2`	`border-inline-start-width: 2px`
`divide-x-4`	`border-inline-start-width: 4px`
`divide-x-8`	`border-inline-start-width: 8px`
`divide-x-reverse`	`Reverses divide direction`

Horizontal Dividers (divide-x) - Visual Examples

Use divide-x for side-by-side layouts. Dividers appear between items.

divide-x

Item 1

Item 2

Item 3

divide-x-2

Item 1

Item 2

Item 3

divide-x-4

Item 1

Item 2

Item 3

Divide Style

Class	CSS / Description
`divide-solid`	`border-style: solid`
`divide-dashed`	`border-style: dashed`
`divide-dotted`	`border-style: dotted`
`divide-double`	`border-style: double`
`divide-none`	`border-style: none`

Divide Styles - Visual Examples

divide-solid

Item 1

Item 2

Item 3

divide-dashed

Item 1

Item 2

Item 3

divide-dotted

Item 1

Item 2

Item 3

divide-double

Item 1

Item 2

Item 3

Divide Color

Use any Tailwind color with the divide-* prefix. Add opacity with /50, /75, etc.

Class	Description
`divide-inherit`	Inherits color from parent
`divide-current`	Uses current text color
`divide-transparent`	Transparent divider
`divide-black`	#000000
`divide-white`	#ffffff
`divide-{color}-{shade}`	Any color (e.g., divide-gray-200, divide-blue-500)
`divide-{color}-{shade}/{opacity}`	With opacity (e.g., divide-gray-500/50)

Divide Colors - Visual Examples

Combine divide width with any Tailwind color. Use opacity modifiers like divide-gray-500/50.

slate

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

divide-slate-400

gray

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

divide-gray-400

red

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

divide-red-400

blue

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

divide-blue-400

green

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

divide-green-400

purple

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

divide-purple-400

Practical Examples

List Items

John Doe

john@example.com

Alice Smith

alice@example.com

Bob Johnson

bob@example.com

<div class="divide-y divide-gray-200">
  <div class="p-4">User 1</div>
  <div class="p-4">User 2</div>
  <div class="p-4">User 3</div>
</div>

Card Sections

Card Title

Subtitle or description

Card content goes here. This is the main body of the card.

<div class="divide-y divide-gray-200">
  <div class="p-4">Header</div>
  <div class="p-4">Content</div>
  <div class="p-4">Footer</div>
</div>

Stats Row

128

Projects

1.2k

Followers

340

Following

<div class="flex divide-x divide-gray-200">
  <div class="flex-1 p-4">Stat 1</div>
  <div class="flex-1 p-4">Stat 2</div>
  <div class="flex-1 p-4">Stat 3</div>
</div>

Divide vs Border - When to Use Each

Using Divide

Item 1

Item 2

Item 3

Use divide when:

You want separators between items only
Building lists, menus, or stacked layouts
You don't want a border around the container
Items flow in a single direction

Using Border

Item 1

Item 2

Item 3

Use border when:

Each item needs its own border
Building cards or boxed components
Items have spacing/gap between them
Items are in a grid layout

Tip: If you have gap between items, divide won't work well because the divider only appears on the element's edge. Use individual borders or a different approach like pseudo-elements.

Usage Tips

Combining Width, Color & Style

<div class="divide-y-2 divide-dashed divide-gray-300">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Responsive Divide

<div class="divide-y md:divide-y-0 md:divide-x">
  <!-- Stack on mobile, row on desktop -->
</div>

With Flex Direction

<div class="flex flex-col divide-y">
  <!-- Vertical stack with dividers -->
</div>
<div class="flex flex-row divide-x">
  <!-- Horizontal row with dividers -->
</div>

Opacity Modifier

<div class="divide-y divide-black/10">
  <!-- Subtle black divider at 10% opacity -->
</div>

About Tailwind Divide

Tailwind's divide utilities are a convenient way to add borders between child elements without manually adding border classes to each item.

They work by adding border-top (for divide-y) or border-left (for divide-x) to all children except the first.

For responsive designs, use breakpoint prefixes: md:divide-x, lg:divide-y-2

Frequently Asked Questions

What's the difference between divide and border utilities?

Border utilities apply borders to all sides of an element, while divide utilities add borders only between child elements. Use divide for lists, stacked items, or navigation menus where you want separators between items but not around the container. Use border when you want borders around individual elements.

How do divide utilities work under the hood?

Tailwind's divide utilities use the :not(:first-child) selector to add borders between elements. For divide-y, it adds a border-top to all children except the first. For divide-x, it adds a border-left to all children except the first. This creates the appearance of dividers between items.

When should I use divide-x vs divide-y?

Use divide-y for vertical stacks (flex-col or block elements) where items are stacked top-to-bottom. Use divide-x for horizontal layouts (flex-row or inline elements) where items are side-by-side. The divider appears perpendicular to the flow direction.

What is divide-x-reverse and divide-y-reverse for?

The reverse utilities are for use with flex-row-reverse or flex-col-reverse. When you reverse the flex direction, the visual order changes but the DOM order doesn't. The reverse divide utilities ensure dividers appear correctly between visually adjacent items in reversed layouts.

Can I use divide with grid layouts?

Divide utilities work best with flex layouts or stacked block elements. For grid layouts, the border approach between elements can be unpredictable. Consider using border utilities on individual cells or gap with a background color for grid separators instead.

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect divide utilities, borders, spacing, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →

Tailwind CSS Divide Cheatsheet

Quick Navigation

How Divide Utilities Work

divide-y

divide-x

Divide Width Y (Vertical Stacks)

Vertical Dividers (divide-y) - Visual Examples

Divide Width X (Horizontal Rows)

Horizontal Dividers (divide-x) - Visual Examples

Divide Style

Divide Styles - Visual Examples

Divide Color

Divide Colors - Visual Examples

Practical Examples

List Items

Navigation Menu

Card Sections

Card Title

Stats Row

Divide vs Border - When to Use Each

Using Divide

Using Border

Usage Tips

Combining Width, Color & Style

Responsive Divide

With Flex Direction

Opacity Modifier

About Tailwind Divide

Frequently Asked Questions

See Tailwind classes on any website

Explore more Tailwind tools

Tailwind Grid Generator

Tailwind Flexbox Generator

Tailwind Gradient Generator

Tailwind Text Gradient

Tailwind Gradients Collection

Tailwind Colors

Tailwind Box Shadow Generator

Tailwind Text Shadow

Tailwind Filter Generator

Tailwind Transform Generator

Tailwind Animation Generator

Tailwind Transition Generator

Tailwind Config Generator

Tailwind Input Generator

Tailwind Class Sorter

Flexbox Cheatsheet

Overflow Cheatsheet