Tailwind CSS - Break Before

Modern Guide to Tailwind CSS: Column and Page Breaks

This tutorial explains how to control column and page breaks before an element using Tailwind’s break-before utilities. These are essential for formatting multi-column layouts and ensuring clean print-friendly pages.

Understanding Break Before

The break-before CSS property controls whether a break—like starting a new column or a new printed page—should occur before a given element. It’s most commonly used in two scenarios: multi-column layouts and print stylesheets.

Break Before Utilities

Tailwind provides utilities for fine-grained control over breaks. The most common are for column control, with others available for page/print control.

Class	CSS Properties	Primary Use Case
break-before-auto	break-before: auto;	Default. Browser decides where to break.
break-before-avoid	break-before: avoid;	Avoids a break before the element.
break-before-all	break-before: all;	Forces a break before the element (for page and column).
break-before-column	break-before: column;	Forces a break, starting a new column. Most common use.
break-before-page	break-before: page;	Forces a page break before the element (for printing).
break-before-avoid-page	break-before: avoid-page;	Avoids a page break before the element (for printing).

Practical Example: Multi-Column Layouts

The most frequent use of break-before on the web is to organize content within a multi-column container. In this example, we have a three-column layout. We use break-before-column on the third h3 heading to force it, and the content that follows, into the next available column.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Column Break Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
    <h1 class="text-3xl font-bold mb-6">Company Quarterly Report</h1>

    <!-- The `columns-3` class creates the multi-column container -->
    <div class="columns-1 md:columns-2 lg:columns-3 gap-8 text-slate-600">
        <h2 class="font-semibold text-lg text-slate-800">Q1: Strong Start</h2>
        <p class="mb-4">The first quarter saw record engagement and sales, exceeding all projections. Key initiatives in marketing paid off handsomely.</p>

        <h2 class="font-semibold text-lg text-slate-800">Q2: Market Expansion</h2>
        <p class="mb-4">We successfully launched in three new territories. The operational challenges were significant but ultimately overcome by our dedicated team.</p>

        <!-- This heading will be pushed to the top of the next column -->
        <h2 class="break-before-column font-semibold text-lg text-slate-800">Q3: Product Innovation</h2>
        <p class="mb-4">The release of our new flagship product, 'Project Phoenix', was the highlight of the third quarter. Initial customer feedback is overwhelmingly positive.</p>

        <h2 class="font-semibold text-lg text-slate-800">Q4: Future Outlook</h2>
        <p class="mb-4">As we look to the next year, our focus will be on consolidating our new market positions and iterating on our product line based on user data.</p>

        <!-- This item is too short to need a break -->
        <h2 class="font-semibold text-lg text-slate-800">Acknowledgements</h2>
        <p>A special thanks to all departments for their hard work.</p>
    </div>
</body>
</html>

Application in Print Styles

For web pages that are intended to be printed, you can use break-before-page to ensure that a new section (like a chapter or a major report section) always starts on a new sheet of paper. You can use Tailwind’s print: variant to apply these styles only when the page is printed.

Print-Only Break Example

Best Practices and Considerations

• Use Sparingly: Forcing breaks can sometimes create awkward whitespace or orphan single lines of text at the bottom of a column. Use it when semantically necessary, like for a new chapter or section heading.
• Responsive Columns: Combine column classes with responsive prefixes (e.g., md:columns-2, lg:columns-3) to create layouts that adapt to screen size, collapsing to a single column on mobile.
• Browser Support: Multi-column layout properties are well-supported in modern browsers, but it’s always good practice to test your layouts on target devices.