Утилиты для управления отображением фрагментов элементов в нескольких строках, столбцах или страницах.
Используйте утилиты decoration-slice и decoration-clone, чтобы управлять отображением таких свойств, как background, border, border-image, box-shadow, clip-page, margin и padding, как если бы элемент был одним непрерывным фрагментом или отдельным блоком.
<span class="decoration-clone bg-gradient-to-b from-yellow-400 to-red-500 text-transparent ...">
Привет<br>
Мир
</span>Чтобы управлять свойством box-decoration-break в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите box-decoration-break. Например, используйте md:decoration-slice, чтобы применить утилиту decoration-slice только для средних размеров экрана и выше.
<div class="decoration-clone md:decoration-slice ...">
<!-- ... -->
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит box-decoration-break.
Вы можете контролировать, какие варианты создаются для утилит box-decoration-break для изменения свойства boxDecorationBreak в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ boxDecorationBreak: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения box-decoration-break, Вы можете полностью отключить их, установив для boxDecorationBreak свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ boxDecorationBreak: false,
}
}