Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Break After

Quiz

Tailwind CSS break-after is a utility class that provides control to force a column break or page break after an element.

Tailwind CSS Break After Classes

The list of Tailwind CSS Break-After Classes that provides an effective way of element alignment.

Class	CSS Properties
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;

Functionality of Tailwind CSS Break After Classes

break-after-auto: This class replaces the CSS break-after: auto; property. It has the default behavior that it will automatically determine the break.
break-after-avoid: This class replaces the CSS break-after: avoid; property, which mainly focusses on avoiding break after an element.
break-after-all: It replaces the CSS break-after: all; property and ensures applying break after all elements.
break-after-avoid-page: It replaces the CSS break-after: avoid-page; property ensures avoiding the page break after the element.
break-after-page: It replaces the CSS break-after: page; the property ensures applying page break after the element.
break-after-left: It replaces the CSS break-after: left; property that applies break after the element, ensuring it will start from the left.
break-after-right: It replaces the CSS break-after: right; property that applies break after the element, ensuring it will start from the right.
break-after-column: It replaces the CSS break-after: column; ensures applying column break after the element.

Tailwind CSS Break After Examples

Below example will illustrate the Tailwind CSS break-after classes.

Example 1

The following example is demonstrating the use of break-after-auto, break-after-avoid, break-after-all, break-after-avoid-page classes.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <p class="text-3xl">
        Tailwind CSS Break After
    </p>
    <p>
        Click on below button to see the effect when you
        print the page.
    </p>
    <button class="bg-blue-500 
                   hover:bg-blue-700 
                   text-white 
                   font-bold 
                   py-1 px-3 
                   my-2 rounded" 
                   onclick="printPage()">
        Print Page
    </button>
    <!-- Section with break-after-auto -->
    <div class="p-4 mb-4 
                bg-gray-100">
        <h2 class="text-lg 
                   font-semibold">
            Section 1: Break After Auto
        </h2>
        <p class="break-after-auto">
            This section uses the `break-after-auto` class. 
            The browser will automatically determine whether 
            a page break should occur after this element.
        </p>
    </div>

    <!-- Section with break-after-avoid -->
    <div class="p-4 mb-4
                bg-gray-200">
        <h2 class="text-lg 
                   font-semibold">
            Section 2: Break After Avoid
        </h2>
        <p class="break-after-avoid">
            This section uses the `break-after-avoid` class.
            A page break will be avoided after this element 
            if possible.
        </p>
    </div>

    <!-- Section with break-after-all -->
    <div class="p-4 mb-4
                bg-gray-300">
        <h2 class="text-lg 
                   font-semibold">
            Section 3: Break After All
        </h2>
        <p class="break-after-all">
            This section uses the `break-after-all` class. A page break
            will always occur after this element.
        </p>
    </div>

    <!-- Section with break-after-avoid-page -->
    <div class="p-4 bg-gray-400 mb-4">
        <h2 class="text-lg font-semibold">
            Section 4: Break After Avoid Page
        </h2>
        <p class="break-after-avoid-page">
            This section uses the `break-after-avoid-page` class.
            A page break will be avoided after this element, 
            unless it is unavoidable to do so.
        </p>
    </div>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>

</html>

Example 2

The following example is demonstrating the use of break-after-page, break-after-left, break-after-right, break-after-column classes.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <p class="text-3xl">
        Tailwind CSS Break After
    </p>
    <p>Click on below button to see the effect when you
       print the page.
    </p>
    <button class="bg-blue-500 
                   hover:bg-blue-700 
                   text-white 
                   font-bold 
                   py-1 px-3 
                   my-2 rounded" 
                   onclick="printPage()">
        Print Page
    </button>
    
    <!-- Section with break-after-page -->
    <div class="p-4 mb-4
                bg-gray-100">
        <h2 class="text-lg 
                   font-semibold">
            Section 1: Break After Page
        </h2>
        <p class="break-after-page">
            This section uses the `break-after-page` class. 
            A page break will occur after this element.
        </p>
    </div>

    <!-- Section with break-after-left -->
    <div class="p-4 mb-4
                bg-gray-200">
        <h2 class="text-lg 
                   font-semibold">
            Section 2: Break After Left
        </h2>
        <p class="break-after-left">
            This section uses the `break-after-left` class.
            A break will occur after this element to ensure 
            the next content starts on the left page of a spread.
        </p>
    </div>

    <!-- Section with break-after-right -->
    <div class="p-4 mb-4
                bg-gray-300">
        <h2 class="text-lg 
                   font-semibold">
            Section 3: Break After Right
        </h2>
        <p class="break-after-right">
            This section uses the `break-after-right` class.
            A break will occur after this element to ensure
            the next content starts on the right page of a 
            spread.
        </p>
    </div>

    <!-- Section with break-after-column -->
    <div class="p-4 mb-4 
                bg-gray-400
                columns-2">
        <h2 class="text-lg 
                   font-semibold">
            Section 4: Break After Column
        </h2>
        <p class="break-after-column">
            This section uses the `break-after-column` class.
            A column break will occur after this element.
        </p>
        <p>
            This is the broken content that has been
            broken due to break-after-column class.
        </p>
    </div>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>

</html>

Print Page