Divide Style

Usage

Control the border style between elements using the divide-{style} utilities.

<div class="divide-y-2 divide-gray-500 divide-dashed">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>

Responsive

To control the border style between elements at a specific breakpoint, add a {screen}: prefix to any existing divide style utility. For example, use md:divide-dashed to apply the divide-dashed utility at only medium screen sizes and above.

<div class="divide-y-2 divide-dashed md:divide-solid">
  <!-- ... -->
</div>

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

Customizing

Responsive and pseudo-class variants

By default, only responsive variants are generated for divide style utilities.

You can control which variants are generated for the divide style utilities by modifying the divideStyle property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     divideStyle: ['responsive'],
+     divideStyle: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don't plan to use the divide style utilities in your project, you can disable them entirely by setting the divideStyle property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     divideStyle: false,
    }
  }