Add break-before, break-inside and break-after utilities

[reinink]

This PR adds new fragmentation utilities to Tailwind CSS, including break-before, break-inside and break-after.

Purpose

The primary purpose of these classes is to set how column and page breaks should behave. For example, it's very common to want to use break-after: avoid-column when using multi-column layouts. These utilities are also useful when setting print page break styles.

Example

Here is an example of how you might use these utilities in a multi-column layout:

<div class="columns-2 space-y-2">
  <blockquote class="p-4 rounded bg-white border-2 border-gray-300 break-inside-avoid-column">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</blockquote>
  <blockquote class="p-4 rounded bg-white border-2 border-gray-300 break-inside-avoid-column">Maecenas bibendum volutpat tortor, ac viverra lacus sem...</blockquote>
  <blockquote class="p-4 rounded bg-white border-2 border-gray-300 break-inside-avoid-column">Nulla ac mi erat. Integer porta lacus sit amet felis al...</blockquote>
  <blockquote class="p-4 rounded bg-white border-2 border-gray-300 break-inside-avoid-column">Nullam at aliquam velit, quis tempor lectus. In ferment...</blockquote>
  <blockquote class="p-4 rounded bg-white border-2 border-gray-300 break-inside-avoid-column">Aenean interdum risus quam, vitae accumsan dui consequa...</blockquote>
</div>

Here is the result without break-inside-avoid-column:

And here is the result with break-inside-avoid-column:

It's worth noting that break-inside: avoid-column was not supported in Firefox, until recently, thanks to Adam. 🙌

Naming

The naming of these classes is anything but creative. I literally just combined the property name with the value. This does mean there are a few four word utilities, which is somewhat regrettable, I just don't see a way to avoid (pun intended) it.

Browser compatibility and excluded values

The browser support for these new utilities is a bit of a mixed bag. Some of these utilities work within paged media (when printing), but don't work in multi-column layouts. To keep things simple, I included all the utilities that have a reasonable amount of browser support. The following properties and values didn't meet that criteria:

break-inside: avoid-region;
break-before: always;
break-before: avoid-column;
break-before: avoid-region;
break-before: recto;
break-before: region;
break-before: verso;
break-after: always;
break-after: avoid-column;
break-after: avoid-region;
break-after: recto;
break-after: region;
break-after: verso;

Complete class list

Here is a complete list of all the new classes and their corresponding CSS:

Class	CSS
break-before-auto	break-before: auto
break-before-avoid	break-before: avoid
break-before-all	break-before: all
break-before-avoid-page	break-before: avoid-page
break-before-page	break-before: page
break-before-left	break-before: left
break-before-right	break-before: right
break-before-column	break-before: column
break-inside-auto	break-inside: auto
break-inside-avoid	break-inside: avoid
break-inside-avoid-page	break-inside: avoid-page
break-inside-avoid-column	break-inside: avoid-column
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