Tailwind CSS Break Before

The break-before property is used to specify whether an element should be broken before, and the set of break opportunities to consider when the line is broken. The syntax for using the break-before property in Tailwind CSS is as follows:

Syntax

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

• {value}: Specifies the break type. Can be one of the following values:
  • auto
  • avoid
  • always
  • left
  • right
  • page
  • column
  • avoid-page
  • avoid-column

---

Examples

Here are some examples of how to use the break-before property in Tailwind CSS:

Example 1: Simple usage

<div class="break-before-auto">
  ...
</div>

Example 2: Using values

<div class="break-before-page">
  ...
</div>

Example 3: Multiple classes

<div class="break-before-auto break-avoid-page">
  ...
</div>

---

Output

The above examples will generate the following CSS:

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

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

.break-before-always {
  break-before: always;
}

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

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

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

.break-before-column {
  break-before: column;
}

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

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

---

Explanation

The break-before property is used to specify whether an element should be broken before, and the set of break opportunities to consider when the line is broken. It is used to control pagination and column layout.

The break-before property can take various values which specify how to break the element. The values for this property are auto, avoid, always, left, right, page, column, avoid-page, and avoid-column.

---

Use

The break-before property is mostly used in a print media context to break an element before printing. It can be used to control pagination and column layout as well.

---

Important Points

• The break-before property is only applicable to block-level elements and generated content.
• It is used to control pagination and column layout.

---

Summary

In this tutorial, we learned about the break-before property in Tailwind CSS. We saw its syntax, some examples, and its output. We also learned about its use, important points to keep in mind, and it's applicable only to block-level elements and generated content.