Tailwind CSS - Divide Width

Tailwind CSS - Divide Width

The Divide Width utilities in Tailwind CSS provide a powerful way to add borders between child elements without cluttering your markup with extra elements. This is perfect for styling lists, button groups, or any sequence of items that need a visual separator.

Core Concept: How Dividers Work

Divide utilities work by targeting all direct child elements within a parent container, except for the first one, and applying a border to them. For example, divide-y adds a border-top to every child except the first, creating horizontal lines. divide-x adds a border-left to every child except the first, creating vertical lines. This approach is clean, efficient, and leverages modern CSS features.

Setting Up Your Modern Development Environment

While you can use the Tailwind Play CDN for quick demos, real-world projects benefit from a build process. This unlocks the full power of Tailwind, including customization, plugins, and performance optimizations. Here’s a typical setup using Vite:

# 1. Create a new project with Vite
npm create vite@latest my-tailwind-project -- --template vanilla
cd my-tailwind-project

# 2. Install Tailwind CSS dependencies
npm install -D tailwindcss postcss autoprefixer

# 3. Initialize Tailwind CSS
npx tailwindcss init -p

# 4. Configure template paths in tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, add the Tailwind directives to your main CSS file (e.g., src/style.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Divide Width Utilities

Here are the primary classes for controlling divider width. You can also combine these with divide-color and divide-style utilities (e.g., divide-slate-200, divide-dashed).

| Class | CSS Properties (Simplified) | | divide-x-{amount} | > :not([hidden]) ~ :not([hidden]) { border-left-width: {amount}; } | | divide-y-{amount} | > :not([hidden]) ~ :not([hidden]) { border-top-width: {amount}; } | | divide-x | Sets a 1px left border between horizontal items. | | divide-y | Sets a 1px top border between vertical items. | | divide-x-0 / divide-y-0 | Removes any dividers. | | divide-x-reverse | Reverses the order, applying the border to the right side. | | divide-y-reverse | Reverses the order, applying the border to the bottom side. |

Practical Examples

Let’s see these utilities in action within a modern project structure.

Example 1: Vertical Menu with Dividers

This example creates a simple settings menu where items are separated by a subtle horizontal line. We also make the dividers responsive, so they only appear on larger screens.

<div class="max-w-sm mx-auto my-8">
  <h3 class="text-lg font-semibold text-slate-800 mb-2">Settings</h3>
  <div class="flex flex-col bg-white rounded-lg shadow-md divide-y divide-slate-200">
    <a href="#" class="p-4 hover:bg-slate-50 transition-colors">Profile</a>
    <a href="#" class="p-4 hover:bg-slate-50 transition-colors">Notifications</a>
    <a href="#" class="p-4 hover:bg-slate-50 transition-colors">Security</a>
    <a href="#" class="p-4 text-red-600 hover:bg-red-50 transition-colors">Log Out</a>
  </div>
</div>

Example 2: Horizontal Button Group

Here, we use divide-x to separate buttons in a group. Using divide-x-reverse can be useful in right-to-left (RTL) layouts.

<div class="flex my-8 justify-center">
  <!-- Standard Order -->
  <div class="flex rounded-md shadow-sm ring-1 ring-slate-300 divide-x divide-slate-300">
    <button class="px-4 py-2 rounded-l-md bg-white hover:bg-slate-100">Edit</button>
    <button class="px-4 py-2 bg-white hover:bg-slate-100">Share</button>
    <button class="px-4 py-2 rounded-r-md bg-white hover:bg-slate-100">Delete</button>
  </div>
</div>

<div class="flex my-8 justify-center">
  <!-- Reversed Order (for RTL or specific styling) -->
  <div dir="rtl" class="flex rounded-md shadow-sm ring-1 ring-slate-300 divide-x divide-x-reverse divide-slate-300">
    <button class="px-4 py-2 rounded-r-md bg-white hover:bg-slate-100">تعديل (Edit)</button>
    <button class="px-4 py-2 bg-white hover:bg-slate-100">مشاركة (Share)</button>
    <button class="px-4 py-2 rounded-l-md bg-white hover:bg-slate-100">حذف (Delete)</button>
  </div>
</div>

Common Errors & Debugging

• Dividers not appearing? Ensure the parent element has flex or grid display. Dividers only work on direct children. Nested elements won’t be affected.
• Styling the first/last item: Since dividers are applied with the ~ (subsequent-sibling) selector, the first item is never targeted. If you need a border on the first item, apply it directly with a border-* utility.
• Responsive Dividers: To apply dividers only at certain breakpoints, use responsive prefixes like md:divide-y. To remove them on smaller screens, you might need to specify divide-y-0 md:divide-y.

Accessibility Considerations

The divide utilities create purely visual separators. They are not announced by screen readers. If the separation between elements is semantically important, consider using the <hr> element for horizontal rules or using ARIA roles to define the relationship between elements in a list.