Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Sep 23, 2021

Conversation

reinink
Copy link
Member

@reinink reinink commented Sep 17, 2021

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:

image

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

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant