Divide Colorv1.3.0+

Utilities for controlling the border color between elements.

Class reference

Class
Preview 
.divide-transparent > * + *
.divide-current > * + *
.divide-black > * + *
.divide-white > * + *
.divide-gray-100 > * + *
.divide-gray-200 > * + *
.divide-gray-300 > * + *
.divide-gray-400 > * + *
.divide-gray-500 > * + *
.divide-gray-600 > * + *
.divide-gray-700 > * + *
.divide-gray-800 > * + *
.divide-gray-900 > * + *
.divide-red-100 > * + *
.divide-red-200 > * + *
.divide-red-300 > * + *
.divide-red-400 > * + *
.divide-red-500 > * + *
.divide-red-600 > * + *
.divide-red-700 > * + *
.divide-red-800 > * + *
.divide-red-900 > * + *
.divide-orange-100 > * + *
.divide-orange-200 > * + *
.divide-orange-300 > * + *
.divide-orange-400 > * + *
.divide-orange-500 > * + *
.divide-orange-600 > * + *
.divide-orange-700 > * + *
.divide-orange-800 > * + *
.divide-orange-900 > * + *
.divide-yellow-100 > * + *
.divide-yellow-200 > * + *
.divide-yellow-300 > * + *
.divide-yellow-400 > * + *
.divide-yellow-500 > * + *
.divide-yellow-600 > * + *
.divide-yellow-700 > * + *
.divide-yellow-800 > * + *
.divide-yellow-900 > * + *
.divide-green-100 > * + *
.divide-green-200 > * + *
.divide-green-300 > * + *
.divide-green-400 > * + *
.divide-green-500 > * + *
.divide-green-600 > * + *
.divide-green-700 > * + *
.divide-green-800 > * + *
.divide-green-900 > * + *
.divide-teal-100 > * + *
.divide-teal-200 > * + *
.divide-teal-300 > * + *
.divide-teal-400 > * + *
.divide-teal-500 > * + *
.divide-teal-600 > * + *
.divide-teal-700 > * + *
.divide-teal-800 > * + *
.divide-teal-900 > * + *
.divide-blue-100 > * + *
.divide-blue-200 > * + *
.divide-blue-300 > * + *
.divide-blue-400 > * + *
.divide-blue-500 > * + *
.divide-blue-600 > * + *
.divide-blue-700 > * + *
.divide-blue-800 > * + *
.divide-blue-900 > * + *
.divide-indigo-100 > * + *
.divide-indigo-200 > * + *
.divide-indigo-300 > * + *
.divide-indigo-400 > * + *
.divide-indigo-500 > * + *
.divide-indigo-600 > * + *
.divide-indigo-700 > * + *
.divide-indigo-800 > * + *
.divide-indigo-900 > * + *
.divide-purple-100 > * + *
.divide-purple-200 > * + *
.divide-purple-300 > * + *
.divide-purple-400 > * + *
.divide-purple-500 > * + *
.divide-purple-600 > * + *
.divide-purple-700 > * + *
.divide-purple-800 > * + *
.divide-purple-900 > * + *
.divide-pink-100 > * + *
.divide-pink-200 > * + *
.divide-pink-300 > * + *
.divide-pink-400 > * + *
.divide-pink-500 > * + *
.divide-pink-600 > * + *
.divide-pink-700 > * + *
.divide-pink-800 > * + *
.divide-pink-900 > * + *

Usage

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

1
2
3
<div class="divide-y divide-blue-300">
  <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>

Changing opacityv1.4.0+

Control the opacity of borders between elements using the .divide-opacity-{amount} utilities.

1
2
3
<div class="divide-y-4 divide-black divide-opacity-25">
  <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>

Learn more in the divide opacity documentation.

Responsive

To control the borders between elements at a specific breakpoint, add a {screen}: prefix to any existing divide utility. For example, adding the class md:divide-x-8 to an element would apply the divide-x-8 utility at medium screen sizes and above.

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

<div class="divide-teal-400 sm:divide-pink-400 md:divide-orange-400 lg:divide-green-400 xl:divide-red-400 divide-y">
  <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>
1
2
3

Customizing

Border Colors

By default Tailwind makes the entire default color palette available as divide colors.

You can customize your color palette by editing the theme.colors section of your tailwind.config.js file, customize just your border and divide colors together using the theme.borderColor section, or customize only the divide colors using the theme.divideColor section.

  // tailwind.config.js
  module.exports = {
    theme: {
      divideColor: theme => ({
-       ...theme('borderColors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

Responsive and pseudo-class variants

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

You can control which variants are generated for the divide color utilities by modifying the divideColor 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: {
      // ...
-     divideColor: ['responsive'],
+     divideColor: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

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

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     divideColor: false,
    }
  }
← Divide WidthDivide Opacity →

Tailwind UI is now in early access!

Learn more