diff --git a/src/corePlugins.js b/src/corePlugins.js index 80a610ab2..e6026ddaf 100644 --- a/src/corePlugins.js +++ b/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']], ]) diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 86f5da88a..00bb9e411 100644 --- a/tests/basic-usage.test.css +++ b/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; } diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 539fc1a51..01103fc3b 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -62,6 +62,7 @@
+