Divide Color

Utilities for controlling the border color between elements.

Show all classes

Control the border color between elements using the utilities.

Changing the opacity

Control the opacity of the divide color using the color opacity modifier.

<div class="divide-y-4 divide-slate-400/25 ...">
  <!-- ... -->
</div>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:divide-pink-400 to only apply the divide-pink-400 utility on hover.

<div class="divide-y divide-teal-400 hover:divide-pink-400">
  <!-- ... -->

For a complete list of all available state modifiers, check out the documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the divide-pink-400 utility at only medium screen sizes and above.

To learn more, check out the documentation on , Dark Mode and .

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
      },
    }
}

Alternatively, you can customize just your divide colors by editing theme.divideColor or theme.extend.divideColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off divide-{color} value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

Learn more about arbitrary value support in the arbitrary values documentation.