Utilities for controlling the border style between elements.
<div class="divide-y-4 divide-yellow-600 divide-dashed">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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.
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: {
extend: {
// ...
+ divideStyle: ['hover', 'focus'],
}
}
}
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,
}
}