Утилиты для управления стилем границы между элементами.
<div class="divide-y-4 divide-yellow-600 divide-dashed">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Чтобы управлять стилем границы между элементами в определенной контрольной точке, добавьте префикс {screen}:
к любой существующей утилите стиля разделения. Например, используйте md:divide-dashed
, чтобы применить утилиту divide-dashed
только для средних размеров экрана и выше.
<div class="divide-y-2 divide-dashed md:divide-solid">
<!-- ... -->
</div>
Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит divide style.
Вы можете контролировать, какие варианты создаются для утилит divide style для изменения свойства divideStyle
в разделе variants
Вашего файла конфигурации tailwind.config.js
.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ divideStyle: ['hover', 'focus'],
}
}
}
Если Вы не планируете использовать в своем проекте утилиты для изменения divide style, Вы можете полностью отключить их, установив для divideStyle
свойство значение false
в разделе corePlugins
Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ divideStyle: false,
}
}