Utilities for controlling the border width between elements.
Add borders between horizontal elements using the divide-x-{amount}
utilities.
<div class="grid grid-cols-3 divide-x divide-green-500">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Add borders between stacked elements using the divide-y-{amount}
utilities.
<div class="grid grid-cols-1 divide-y divide-yellow-500">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
If your elements are in reverse order (using say flex-row-reverse
or flex-col-reverse
), use the divide-x-reverse
or divide-y-reverse
utilities to ensure the border is added to the correct side of each element.
<div class="flex flex-col-reverse divide-y divide-y-reverse divide-rose-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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-y-8
to an element would apply the divide-y-8
utility at medium screen sizes and above.
<div class="divide-y divide-gray-400 md:divide-y-8">
<div class="py-2">1</div>
<div class="py-2">2</div>
<div class="py-2">3</div>
</div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
The divide width scale inherits its values from the borderWidth
scale by default, so if you'd like to customize your values for both border width and divide width together, use the theme.borderWidth
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
borderWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
+ '3': '3px',
'4': '4px',
+ '6': '6px',
- '8': '8px',
}
}
}
To customize only the divide width values, use the theme.divideWidth
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
divideWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
+ '3': '3px',
'4': '4px',
+ '6': '6px',
- '8': '8px',
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
By default, only responsive variants are generated for divide width utilities.
You can control which variants are generated for the divide width utilities by modifying the divideWidth
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: {
extend: {
// ...
+ divideWidth: ['hover', 'focus'],
}
}
}
If you don't plan to use the divide width utilities in your project, you can disable them entirely by setting the divideWidth
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ divideWidth: false,
}
}