Browser Support

Menu

Tailwind CSS Divide Style

Divide Style sets the style of the separation borders of adjacent child elements within a container, particularly when arranging items in flex or grid layouts. Tailwind CSS simplifies this by providing a set of utilities explicitly designed for divide styles. These utilities allow you to define the width, color, and style of the dividing lines seamlessly.

In this article, you'll delve into how to effectively use Divide Style utilities in Tailwind CSS. Whether you're adding fundamental divide styles, applying them conditionally, or modifying them for responsiveness, this guide ensures you're well-equipped to tackle all scenarios with a professional edge.

Class	Properties	Example
`divide-solid`	`border-style: solid;`	`<div className="divide-solid"></div>`
`divide-dashed`	`border-style: dashed;`	`<div className="divide-dashed"></div>`
`divide-dotted`	`border-style: dotted;`	`<div className="divide-dotted"></div>`
`divide-double`	`border-style: double;`	`<div className="divide-double"></div>`
`divide-none`	`border-style: none;`	`<div className="divide-none"></div>`

Overview of Divide Style

Adding the Divide Style

Divide style utilities in Tailwind CSS enable you to render distinct separators between child elements without adding additional markup. You might use them primarily for visual organization in lists, menu items, or layout components. These styles can be solid, dashed, dotted, double, none.

Here's how you can apply and customize these utilities:

This is a live editor. Play around with it!

// React JSX Component Example with Divide Style

export default function DivideStyleDemo() {
  return (
    <div className="divide-y divide-dashed divide-gray-500 bg-gray-200 h-screen w-screen flex flex-col">
      {/* Divides child items with dashed separator */}
      <div className="p-4">Item 1</div>
      <div className="p-4">Item 2</div>
      <div className="p-4">Item 3</div>
    </div>
  );
}

// CSS Values Applied:
// divide-dashed: Renders the dividing line with a dashed pattern

States and Responsiveness

Hover and Focus States

Tailwind CSS also supports conditional applications of divide styles, such as on hover and focus states. You can dynamically render the dividing line's style, width, or color only when a certain state is encountered.

This is a live editor. Play around with it!

// React JSX Component Example with Hover State

export default function HoverDivideStyle() {
  return (
    <div className="bg-white h-screen w-screen divide-y-4 divide-blue-700 hover:divide-dotted">
      {/* On hover, the divide color transitions */}
      <div className="p-5">Hover over me!</div>
      <div className="p-5">I also react to hover</div>
      <div className="p-5">Hover to see the effect</div>
    </div>
  );
}

// CSS Values Applied:
// divide-y: Applies vertical dividers
// divide-gray-300: Default dividing color
// hover:divide-gray-800: Changes divide color during hover state

Breakpoint Modifiers

Responsive designs thrive when styles adjust dynamically across different screen sizes. Tailwind's divide style utilities let you control the divide styles for each breakpoint.

This is a live editor. Play around with it!

// React JSX Component using Responsive Breakpoints

export default function ResponsiveDivideStyle() {
  return (
    <div className="bg-blue-100 h-screen w-screen divide-y-4 divide-solid md:divide-y-dashed lg:divide-y-double divide-red-800">
      {/* Divide style changes based on screen size */}
      <div className="p-4">Small Screen Divider (4px)</div>
      <div className="p-4">Medium Screen Divider (8px)</div>
      <div className="p-4">Large Screen Divider (2px)</div>
    </div>
  );
}

Real World Examples

Team Members List with Horizontal Dividers

A professional team directory component with horizontal dividers and hover effects. Each team member card shows their role and contact information.

This is a live editor. Play around with it!

export default function TeamDirectory() {
  const teamMembers = [
    {
      name: "Sarah Johnson",
      role: "Lead Developer",
      email: "sarah.j@company.com",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo"
    },
    {
      name: "Michael Chen",
      role: "UX Designer",
      email: "michael.c@company.com",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Michael Chen profile photo"
    },
    {
      name: "Emily Rodriguez",
      role: "Product Manager",
      email: "emily.r@company.com",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Rodriguez profile photo"
    },
    {
      name: "David Kim",
      role: "Frontend Developer",
      email: "david.k@company.com",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "David Kim profile photo"
    },
    {
      name: "Lisa Wang",
      role: "Backend Developer",
      email: "lisa.w@company.com",
      image: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f",
      alt: "Lisa Wang profile photo"
    },
    {
      name: "James Wilson",
      role: "DevOps Engineer",
      email: "james.w@company.com",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "James Wilson profile photo"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="divide-y divide-dashed divide-gray-800">
        {teamMembers.map((member, index) => (
          <div key={index} className="py-4 hover:bg-gray-50 transition duration-150">
            <div className="flex items-center space-x-4">
              <img
                src={member.image}
                alt={member.alt}
                className="w-12 h-12 rounded-full"
              />
              <div>
                <h3 className="text-lg font-semibold">{member.name}</h3>
                <p className="text-gray-600">{member.role}</p>
                <p className="text-gray-500 text-sm">{member.email}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Pricing Features Comparison

A pricing features comparison component with vertical dividers between columns and horizontal dividers between rows.

This is a live editor. Play around with it!

export default function PricingComparison() {
  const features = [
    {
      name: "Storage",
      basic: "10 GB",
      pro: "50 GB",
      enterprise: "Unlimited"
    },
    {
      name: "Users",
      basic: "1 user",
      pro: "5 users",
      enterprise: "Unlimited users"
    },
    {
      name: "Support",
      basic: "Email only",
      pro: "Email & Phone",
      enterprise: "24/7 Priority"
    },
    {
      name: "Analytics",
      basic: "Basic",
      pro: "Advanced",
      enterprise: "Custom"
    },
    {
      name: "API Access",
      basic: "No",
      pro: "Yes",
      enterprise: "Yes"
    },
    {
      name: "Custom Domain",
      basic: "No",
      pro: "Yes",
      enterprise: "Yes"
    }
  ];

  return (
    <div className="max-w-5xl mx-auto p-6">
      <div className="grid grid-cols-4 divide-x divide-dotted divide-gray-700">
        <div className="p-4 font-semibold">Features</div>
        <div className="p-4 text-center font-semibold">Basic</div>
        <div className="p-4 text-center font-semibold">Pro</div>
        <div className="p-4 text-center font-semibold">Enterprise</div>
        
        {features.map((feature, index) => (
          <>
            <div key={`feature-${index}`} className="p-4 divide-y divide-gray-200">
              {feature.name}
            </div>
            <div className="p-4 text-center divide-y divide-gray-200">
              {feature.basic}
            </div>
            <div className="p-4 text-center divide-y divide-gray-200">
              {feature.pro}
            </div>
            <div className="p-4 text-center divide-y divide-gray-200">
              {feature.enterprise}
            </div>
          </>
        ))}
      </div>
    </div>
  );
}

Recipe Steps List

A cooking recipe component with numbered steps and dividers between each instruction.

This is a live editor. Play around with it!

export default function RecipeSteps() {
  const recipe = {
    title: "Classic Chocolate Cake",
    steps: [
      {
        step: 1,
        instruction: "Preheat oven to 350°F (175°C)",
        time: "5 mins",
        alt: "Preheating oven"
      },
      {
        step: 2,
        instruction: "Mix dry ingredients in a large bowl",
        time: "10 mins",
        alt: "Mixing ingredients"
      },
      {
        step: 3,
        instruction: "Add wet ingredients and mix until smooth",
        time: "15 mins",
        alt: "Adding wet ingredients"
      },
      {
        step: 4,
        instruction: "Pour batter into prepared pan",
        time: "5 mins",
        alt: "Pouring batter"
      },
      {
        step: 5,
        instruction: "Bake for 30-35 minutes",
        time: "35 mins",
        alt: "Baking cake"
      },
      {
        step: 6,
        instruction: "Let cool and decorate",
        time: "20 mins",
        alt: "Decorating cake"
      }
    ]
  };

  return (
    <div className="max-w-3xl mx-auto p-6">
      <h2 className="text-2xl font-bold mb-6">{recipe.title}</h2>
      <div className="divide-y divide-dashed divide-gray-300">
        {recipe.steps.map((step) => (
          <div key={step.step} className="py-6 flex items-center space-x-6">
            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
              <span className="text-blue-600 font-semibold">{step.step}</span>
            </div>
            <div className="flex-grow">
              <p className="font-medium">{step.instruction}</p>
              <p className="text-gray-500 text-sm">{step.time}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

FAQ Accordion

A frequently asked questions component with dividers between questions and expandable answers.

This is a live editor. Play around with it!

export default function FAQAccordion() {
  const faqs = [
    {
      question: "What payment methods do you accept?",
      answer: "We accept all major credit cards, PayPal, and bank transfers."
    },
    {
      question: "How long does shipping take?",
      answer: "Standard shipping takes 3-5 business days within the continental US."
    },
    {
      question: "What is your return policy?",
      answer: "We offer 30-day returns on all unused items in original packaging."
    },
    {
      question: "Do you ship internationally?",
      answer: "Yes, we ship to most countries worldwide with varying delivery times."
    },
    {
      question: "How can I track my order?",
      answer: "You'll receive a tracking number via email once your order ships."
    },
    {
      question: "Do you offer gift wrapping?",
      answer: "Yes, gift wrapping is available for an additional $5 per item."
    }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="divide-y divide-dashed divide-gray-200">
        {faqs.map((faq, index) => (
          <details key={index} className="group py-4">
            <summary className="flex justify-between items-center cursor-pointer list-none">
              <span className="font-medium">{faq.question}</span>
              <span className="ml-6 flex-shrink-0">
                <svg className="w-5 h-5 group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </span>
            </summary>
            <div className="mt-4 text-gray-600">
              {faq.answer}
            </div>
          </details>
        ))}
      </div>
    </div>
  );
}

Timeline Events

A vertical timeline component with dividers between events and date indicators.

This is a live editor. Play around with it!

export default function Timeline() {
  const events = [
    {
      date: "Jan 2023",
      title: "Company Founded",
      description: "Started operations with a small team of 5 people",
      icon: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab",
      alt: "Company founding"
    },
    {
      date: "Mar 2023",
      title: "First Major Client",
      description: "Secured our first enterprise client",
      icon: "https://images.unsplash.com/photo-1552581234-26160f608093",
      alt: "Client meeting"
    },
    {
      date: "Jun 2023",
      title: "Office Expansion",
      description: "Moved to a larger office space",
      icon: "https://images.unsplash.com/photo-1497366216548-37526070297c",
      alt: "New office"
    },
    {
      date: "Sep 2023",
      title: "Team Growth",
      description: "Doubled team size to 10 members",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team photo"
    },
    {
      date: "Nov 2023",
      title: "Product Launch",
      description: "Released our flagship product",
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Product launch"
    },
    {
      date: "Dec 2023",
      title: "Industry Award",
      description: "Won 'Best Innovation' award",
      icon: "https://images.unsplash.com/photo-1531545514256-b1400bc00f31",
      alt: "Award ceremony"
    }
  ];

  return (
    <div className="max-w-3xl mx-auto p-6">
      <div className="divide-y divide-dotted divide-gray-500">
        {events.map((event, index) => (
          <div key={index} className="py-6">
            <div className="flex items-start space-x-4">
              <div className="flex-shrink-0">
                <img
                  src={event.icon}
                  alt={event.alt}
                  className="w-12 h-12 rounded-full object-cover"
                />
              </div>
              <div className="flex-grow">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold text-lg">{event.title}</h3>
                  <span className="text-gray-500 text-sm">{event.date}</span>
                </div>
                <p className="text-gray-600 mt-2">{event.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Leverage Utility Combinations

Divide Style utilities are highly effective when combined with other Tailwind components to create modular yet visually appealing interfaces. Pair divide options with layout utilities such as flex, grid, or space to architect complex user interfaces like dashboards, cards, or step-by-step guides. For instance:

This is a live editor. Play around with it!

export default function CardGrouping() {
  return (
    <div className="grid grid-cols-3 gap-6 divide-x divide-dotted divide-gray-400">
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800">Plan A</h3>
        <p className="text-gray-600 text-sm">Includes basic features.</p>
      </div>
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800">Plan B</h3>
        <p className="text-gray-600 text-sm">Includes premium features.</p>
      </div>
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800">Plan C</h3>
        <p className="text-gray-600 text-sm">Includes enterprise features.</p>
      </div>
    </div>
  );
}

Accessibility Considerations

Support Accessible Interactive Elements

Dividers applied to interactive areas, like menus, accordions, or data tables, should enhance clarity without detracting from other accessibility considerations. Focus indicators and keyboard navigability often accompany interactive elements, and dividers should align effectively with these features:

This is a live editor. Play around with it!

export default function AccessibleTable() {
  return (
    <div className="overflow-auto">
      <table className="min-w-full divide-y divide-dashed divide-gray-300">
        <thead className="bg-gray-200">
          <tr>
            <th className="px-6 py-3 font-medium text-gray-700 text-left">Name</th>
            <th className="px-6 py-3 font-medium text-gray-700 text-left">Role</th>
            <th className="px-6 py-3 font-medium text-gray-700 text-left">Status</th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-dashed divide-gray-200">
          <tr tabindex="0">
            <td className="px-6 py-2 text-gray-900">Alice Smith</td>
            <td className="px-6 py-2 text-gray-600">Designer</td>
            <td className="px-6 py-2 text-green-600">Active</td>
          </tr>
          <tr tabindex="1">
            <td className="px-6 py-2 text-gray-900">Bob Johnson</td>
            <td className="px-6 py-2 text-gray-600">Engineer</td>
            <td className="px-6 py-2 text-red-600">Inactive</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

In this snippet, dividing lines visually separate table rows, complementing focus state for users navigating via keyboard. These practices ensure interactive elements remain accessible to individuals using diverse input methods.

Border Style Divide Width