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

* Add `break-before` utilities

* Add `break-inside` utilities

* Add `break-after` utilities

* Add `break-before/inside/after` utilities to basic usage test

* Remove `break-before` and `break-after` utilities that have no browser support

* Rename `break-inside: avoid-column` utility to `break-inside-avoid-column`

Author: reinink

src/corePlugins.js

@@ -813,6 +813,41 @@ export let appearance = ({ addUtilities }) => {
 
 export let columns = createUtilityPlugin('columns', [['columns', ['columns']]])
 
+export let breakBefore = ({ addUtilities }) => {
+  addUtilities({
+    '.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' },
+  })
+}
+
+export let breakInside = ({ addUtilities }) => {
+  addUtilities({
+    '.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' },
+  })
+}
+
+export let breakAfter = ({ addUtilities }) => {
+  addUtilities({
+    '.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' },
+  })
+}
+
 export let gridAutoColumns = createUtilityPlugin('gridAutoColumns', [
   ['auto-cols', ['gridAutoColumns']],
 ])

tests/basic-usage.test.css

@@ -320,6 +320,15 @@
 .columns-md {
   columns: 28rem;
 }
+.break-before-page  {
+  break-before: page;
+}
+.break-inside-avoid-column  {
+  break-inside: avoid-column;
+}
+.break-after-auto {
+  break-after: auto;
+}
 .auto-cols-min {
   grid-auto-columns: min-content;
 }

tests/basic-usage.test.html

@@ -62,6 +62,7 @@
     <div class="gap-x-2 gap-y-3 gap-4"></div>
     <div class="from-red-300 via-purple-200 to-blue-400"></div>
     <div class="columns-1 columns-md"></div>
+    <div class="break-before-page break-inside-avoid-column break-after-auto"></div>
     <div class="auto-cols-min"></div>
     <div class="grid-flow-row"></div>
     <div class="auto-rows-max"></div>