archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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`
This commit is contained in:
Jonathan Reinink 2021-09-23 14:31:23 -04:00 committed by GitHub
parent f2bc50accf
commit 744249d631
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/corePlugins.js
View File

@ -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']],
])

9
tests/basic-usage.test.css
View File

@ -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;
}

1
tests/basic-usage.test.html
View File

@ -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>