1. Layout
  2. break-after

Layout

break-after

Utilidades para controlar cómo una columna o página debe romperse después de un elemento.

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

Ejemplos

Ejemplo básico

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

<div class="columns-2">
<p>Bueno, déjame decirte algo, ...</p>
<p class="break-after-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-after con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="break-after-column md:break-after-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