Tailwind CSS - Divide Color

Tailwind CSS - Divide Color

The divide-color utilities in Tailwind CSS provide an elegant way to control the color of borders placed between child elements. This is often simpler and cleaner than manually adding borders to each element.

How it Works

Divide utilities work in tandem. First, you must establish the direction and width of the dividers using divide-x-{width} or divide-y-{width} on a parent container. Then, you apply a divide-{color} utility to set the color.

Tailwind intelligently adds the border to all direct children except the first one, preventing a leading or trailing border.

<div class="flex divide-x-2 divide-blue-500">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Basic Usage

Here’s an example of creating a vertical list where each item is separated by a gray divider. This is a common pattern for settings menus, notification lists, or comment threads.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="divide-y divide-slate-200">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-slate-800">Account Settings</h3>
      <p class="text-slate-500 mt-1">Manage your profile and preferences.</p>
    </div>
    <div class="p-6">
      <h3 class="text-lg font-semibold text-slate-800">Notifications</h3>
      <p class="text-slate-500 mt-1">Choose how you receive notifications.</p>
    </div>
    <div class="p-6">
      <h3 class="text-lg font-semibold text-slate-800">Billing</h3>
      <p class="text-slate-500 mt-1">View payment history and manage subscriptions.</p>
    </div>
  </div>
</div>

State & Responsive Modifiers

Like all Tailwind utilities, divide-color can be applied conditionally using state variants (like hover) and responsive breakpoints (like md). This allows for dynamic and adaptive UIs.

In this example, the divider color changes on hover, providing visual feedback to the user.

<div class="flex flex-col divide-y divide-gray-200 hover:divide-indigo-400 transition-colors">
  <a href="#" class="p-4 text-gray-700 hover:bg-gray-50">Profile</a>
  <a href="#" class="p-4 text-gray-700 hover:bg-gray-50">Settings</a>
  <a href="#" class="p-4 text-gray-700 hover:bg-gray-50">Log Out</a>
</div>

Using Arbitrary Values

If you need a one-off divider color that isn’t in your theme, you can use arbitrary value syntax directly in your HTML.

<div class="flex divide-x divide-[#ff7e5f]">
  <div class="p-4">Section A</div>
  <div class="p-4">Section B</div>
</div>

Divide Color Reference

Tailwind generates divide color utilities for every color in your configured color palette. The class is structured as divide-{color}-{shade}.

Class	CSS Properties
divide-inherit	border-color: inherit;
divide-current	border-color: currentColor;
divide-transparent	border-color: transparent;
divide-black	border-color: rgb(0 0 0);
divide-white	border-color: rgb(255 255 255);
divide-slate-500	border-color: rgb(100 116 139);
divide-red-500	border-color: rgb(239 68 68);
…	…

Note: The table above is a small sample. A divide-* class is available for every color in your theme.colors configuration, including any custom colors you’ve added.