Макет
Утилиты для управления тем, как фрагменты элемента должны отображаться при переносе на несколько строк, столбцов или страниц.
Class | Styles |
---|---|
box-decoration-clone | box-decoration-break: clone |
box-decoration-slice | box-decoration-break: slice |
Используйте утилиты box-decoration-slice
и box-decoration-clone
для управления тем, должны ли такие свойства как фон, граница, border-image, box-shadow, clip-path, margin и padding отображаться так, как будто элемент является одним непрерывным фрагментом или отдельными блоками:
box-decoration-slice
box-decoration-clone
<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Привет<br />Мир</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Привет<br />Мир</span>
Префикс a box-decoration-break
утилита с вариантом контрольной точки, например md:
, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="box-decoration-clone md:box-decoration-slice ..."> <!-- ... --></div>
Подробнее об использовании вариантов читайте в документации по вариантам.