1. Layout
  2. break-before

Layout

break-before

Utilidades para controlar cómo una columna o página debe romperse 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

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

<div class="columns-2">
<p>Bueno, déjame decirte algo, ...</p>
<p class="break-before-column">Claro, adelante, ríete...</p>
<p>Tal vez podamos vivir sin...</p>
<p>Mira. Si crees que esto es...</p>
</div>

Diseño Responsive

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

<div class="break-before-column md:break-before-auto ...">
<!-- ... -->
</div>

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

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada