1. Diseño
  2. break-before

Diseño

break-before

Utilidades para controlar cómo se debe romper una columna o página antes de un elemento.

ClaseEstilos
break-before-auto
break-before: auto;
break-before-avoid
break-before: avoid;
break-before-all
break-before: all;
break-before-avoid-page
break-before: avoid-page;
break-before-page
break-before: page;
break-before-left
break-before: left;
break-before-right
break-before: right;
break-before-column
break-before: column;

Ejemplos

Ejemplo básico

Utiliza utilidades como break-before-column y break-before-page para controlar cómo debe comportarse un salto de columna o página antes de un elemento:

<div class="columns-2">  <p>Well, let me tell you something, ...</p>  <p class="break-before-column">Sure, go ahead, laugh...</p>  <p>Maybe we can live without...</p>  <p>Look. If you think this is...</p></div>

Diseño responsivo

Antepone a la utilidad break-before 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="break-before-column md:break-before-auto ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas