Tailwind CSS Break After Page

This page covers the break-after utility class in Tailwind CSS.

Syntax

The break-after utility class is used to define how page elements should break after its content. The syntax is as follows:

<div class="break-after-{value}"></div>

Examples

Here are some examples of using the break-after utility class in Tailwind CSS.

<div class="break-after-auto"></div> <!-- default value -->
<div class="break-after-avoid"></div>
<div class="break-after-avoid-page"></div>
<div class="break-after-avoid-column"></div>
<div class="break-after-page"></div>
<div class="break-after-left"></div>
<div class="break-after-right"></div>
<div class="break-after-recto"></div>
<div class="break-after-verso"></div>

Output

The break-after utility class produces the following CSS:

.break-after-auto {
  break-after: auto;
}

.break-after-avoid {
  break-after: avoid;
}

.break-after-avoid-page {
  break-after: avoid-page;
}

.break-after-avoid-column {
  break-after: avoid-column;
}

.break-after-page {
  break-after: page;
}

.break-after-left {
  break-after: left;
}

.break-after-right {
  break-after:;
}

.break-after-recto {
  break-after: recto;
}

.break-after-verso {
  break-after: verso;
}

Explanation

The break-after utility class is used to define how page elements should break after its content.

• auto: Default value. Page breaks may be inserted after the element if necessary.

• avoid: Avoid page or column breaks after the element.

• avoid-page: Avoid page breaks after the element.

• avoid-column: Avoid column breaks after the element.

• page: Always force a page break after the element.

• left: Always force a page break after the element, and the next page will be a left-hand page.

• right: Always force a page break after the element, and the next page will be a right-hand page.

• recto: Always force a page break after the element, and the next page will be a recto page.

• verso: Always force a page break after the element, and the next page will be a verso page.

Use

The break-after utility class can be used to control how page elements are broken after their content.

For example, the break-after-page class can be used to ensure that a new page always starts after an element, or the break-after-avoid class can be used to prevent a page break from occurring after an element.

Important Points

• The break-after utility class is used to define how page elements should break after its content.

• The auto value is the default value for break-after.

• Use the break-after utility class to control how page elements are broken after their content.

Summary

The break-after utility class in Tailwind CSS is a useful class for controlling how page elements are broken after their content. The class can be used to ensure that a new page always starts after an element, or to prevent a page break from occurring after an element. The break-after utility class has several possible values to choose from, including auto, avoid, avoid-page, avoid-column, page, left, right, recto, and verso.