Tailwind CSS - Break After

Tailwind’s break-after-* utilities control how a page, column, or region break should behave after an element. Their primary and most common use case is for fine-tuning the layout of printed documents, but they can also be used for multi-column layouts on the web.

Understanding the Print Context

Most of these utilities are designed for paged media, like a PDF or a physical printout. They are best used with Tailwind’s print: variant, which applies the style only when the page is being printed.

Break After Classes

Class	CSS Properties	Primary Use Case (Print)
`break-after-auto`	`break-after: auto;`	Default behavior; browser decides.
`break-after-avoid`	`break-after: avoid;`	Avoids a break (column or page) after the element.
`break-after-all`	`break-after: all;`	Forces a break after the element. For pages, this is similar to `break-after-page`.
`break-after-avoid-page`	`break-after: avoid-page;`	Avoids a page break after the element.
`break-after-page`	`break-after: page;`	Always forces a page break after the element.
`break-after-left`	`break-after: left;`	Forces page breaks so the next page is a left page (in a two-sided document).
`break-after-right`	`break-after: right;`	Forces page breaks so the next page is a right page.
`break-after-column`	`break-after: column;`	Forces a column break after the element in a multi-column layout.

Practical Application: Creating a Printable Report

This example demonstrates how to use break-after utilities with the print: variant to create a clean, well-structured printable report. Each major section will start on a new page in the printout, but on the screen, it will appear as a single, continuous document.

Example: Print-Optimized Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Printable Report with Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-100 print:bg-white">

  <div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg print:shadow-none">
    <div class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold">Quarterly Business Report</h1>
      <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 print:hidden" onclick="window.print()">
        Print Report
      </button>
    </div>

    <!-- Section 1: Always starts on the first page. -->
    <section class="mb-8 print:break-after-page">
      <h2 class="text-2xl font-semibold border-b pb-2 mb-4">Executive Summary</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.</p>
    </section>

    <!-- Section 2: Will be forced onto a new page when printing. -->
    <section class="mb-8 print:break-after-page">
      <h2 class="text-2xl font-semibold border-b pb-2 mb-4">Financial Performance</h2>
      <p>Praesent quis congue massa. Proin sed eleifend magna. Curabitur ut commodo elit, et accumsan lorem.</p>
    </section>

    <!-- Section 3: This heading will try to stay with the paragraph below it. -->
    <section>
      <h2 class="text-2xl font-semibold border-b pb-2 mb-4 print:break-after-avoid">Market Analysis</h2>
      <p>Nunc eu est et massa semper accumsan. Sed ac sem eu dolor commodo tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </section>
  </div>

</body>
</html>

Using with Multi-Column Layouts

The break-after-column class is useful within a multi-column container (created with the columns-* utilities) to force content into the next column.

Example: Forcing a Column Break

<div class="columns-2 gap-8">
  <p>This is the first column. It contains some text that will flow naturally.</p>
  <p class="break-after-column">This paragraph will have a column break forced after it.</p>
  <p>This text is guaranteed to start in the second column.</p>
  <p>More text to fill up the space.</p>
</div>

Key Takeaways

Think Print-First: The primary use for these utilities is paged media.
Use the print: Variant: To avoid affecting your screen layout, always apply break utilities with the print: prefix (e.g., print:break-after-page).
Column Control: break-after-column is the main utility you’ll use for on-screen multi-column layouts.