Tailwind CSS Divide Color

The divide-color class in Tailwind CSS sets the color of the dividing lines between child elements, using the border-color property.

Syntax

<div class="divide-color-{color}">
  ...
</div>

• {color} specifies the color of the dividing lines. Acceptable values are the standard Tailwind color names.

Example

<div class="divide-color-blue-500 divide-y">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

Output

The above example will produce a div with a dividing line between each p element, in blue color.

Explanation

The divide-color-{color} class sets the color of the dividing lines between the child elements of the parent element. The {color} value can be any of the standard Tailwind color names.

In the example above, divide-color-blue-500 sets the color of the dividing lines to blue.

Use

Use the divide-color class to visually separate child elements of a parent div using colored dividing lines.

Important Points

• The divide-color class only sets the color of the dividing lines between child elements, and does not add any other styling (such as border width).
• The divide-color class is part of the divide utility family in Tailwind CSS, which includes other classes for specifying the thickness, opacity and style of the dividing lines.

Summary

The divide-color class in Tailwind CSS sets the color of the dividing lines between child elements of a parent div. It accepts color values from the standard Tailwind color palette. Use this class to visually separate child elements of a parent div using colored dividing lines.