Diseño
Utilidades para controlar cómo se deben renderizar los fragmentos de un elemento en varias líneas, columnas o páginas.
| Clase | Estilos |
|---|---|
box-decoration-clone | box-decoration-break: clone; |
box-decoration-slice | box-decoration-break: slice; |
Utiliza las utilidades box-decoration-slice y box-decoration-clone para controlar si las propiedades como background, border, border-image, box-shadow, clip-path, margin y padding se deben renderizar como si el elemento fuera un fragmento continuo o bloques distintos:
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 ..."> Hola<br />Mundo</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ..."> Hola<br />Mundo</span>Antepone a la utilidad box-decoration-break el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="box-decoration-clone md:box-decoration-slice ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.