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,
}
}