box-decoration-break

Ejemplos

Ejemplo básico

Usa las utilidades box-decoration-slice y box-decoration-clone para controlar si propiedades como background, border, border-image, box-shadow, clip-path, margin y padding deben renderizarse como si el elemento fuera un fragmento continuo o bloques distintos:

<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">
  Hello<br />World
</span>
<span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">
  Hello<br />World
</span>

Diseño Responsive

Prefija una utilidad box-decoration-break con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="box-decoration-clone md:box-decoration-slice ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.