Tailwind CSS - Divide Style

Tailwind CSS - Divide Style

Tailwind’s divide utilities offer a powerful and elegant way to add borders between child elements. Instead of manually adding a border to each element, you can apply a single set of divide utilities to the parent container.

Available Divide Style Classes

These utilities control the border-style property of the dividers.

Class	CSS Properties
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;

Core Concepts

• Parent-based Application: Divide utilities are applied to the parent container of the elements you wish to separate.
• Directional Control: You must specify the direction of the dividers with divide-x (for vertical lines between items in a row) or divide-y (for horizontal lines between items in a column).
• Styling the Divider: You combine divide-style with other utilities like divide-width (e.g., divide-y-2) and divide-color (e.g., divide-gray-300) to fully style the divider.
• Reversing Order: When working with flex-row-reverse or flex-col-reverse, use the divide-x-reverse or divide-y-reverse utilities to add the dividers to the correct side of each element.

Practical Examples

Example 1: Styling a Vertical Navigation Menu

This example shows how to create clean, separated links in a settings menu. We apply divide-y and divide-gray-200 to the parent div to automatically place a horizontal line between each link.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Divide Style Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4">

  <div class="w-full max-w-xs bg-white rounded-lg shadow-md">
    <div class="font-bold text-lg p-4 border-b">Settings</div>
    <!-- Parent container with divide utilities -->
    <div class="divide-y divide-gray-200">
      <a href="#" class="block p-4 hover:bg-gray-50">Profile</a>
      <a href="#" class="block p-4 hover:bg-gray-50">Notifications</a>
      <a href="#" class="block p-4 hover:bg-gray-50">Billing</a>
      <a href="#" class="block p-4 hover:bg-gray-50">Security</a>
    </div>
  </div>

</body>
</html>

Example 2: Responsive and Conditional Divider Styles

Dividers can be styled differently based on state or screen size. In this example, we create a list with dotted dividers that become solid and change color on hover, providing clear visual feedback.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conditional Divide Style</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <div class="w-full max-w-md bg-white rounded-lg shadow-xl">
    <div class="p-4 border-b">
      <h3 class="font-semibold text-xl">Project Tasks</h3>
    </div>
    <!-- Group modifier allows parent state to style children -->
    <div class="group divide-y divide-dotted divide-slate-300 hover:divide-solid hover:divide-blue-400">
      <div class="p-4 flex justify-between items-center">
        <span>Design the new dashboard</span>
        <span class="text-sm text-gray-500">2 days left</span>
      </div>
      <div class="p-4 flex justify-between items-center">
        <span>Implement API endpoints</span>
        <span class="text-sm text-gray-500">4 days left</span>
      </div>
      <div class="p-4 flex justify-between items-center">
        <span>Deploy to staging server</span>
        <span class="text-sm text-gray-500">Due tomorrow</span>
      </div>
    </div>
  </div>

</body>
</html>

Accessibility & Best Practices

• Purely Visual: Dividers are implemented with borders on child elements (using the + * selector). They are purely presentational and do not add any semantic value for screen readers. They are for visual grouping only.
• Use with Flexbox/Grid: Divide utilities work perfectly with Flexbox and Grid layouts, as they target adjacent siblings.
• Avoid Double Borders: Be careful not to mix divide-* utilities with border-* utilities on the child elements, as you might end up with double-thick borders where they meet.
• Customization: You can’t customize the divide styles themselves (solid, dashed, etc.) as these are fixed CSS keywords. However, you can customize the divideWidth and divideColor scales in your tailwind.config.js.