https://github.com/hacknug/tailwindcss-break
Break utilities for Tailwind CSS.
https://github.com/hacknug/tailwindcss-break
Last synced: 4 months ago
JSON representation
Break utilities for Tailwind CSS.
- Host: GitHub
- URL: https://github.com/hacknug/tailwindcss-break
- Owner: hacknug
- Created: 2018-08-31T11:55:08.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-26T08:58:38.000Z (over 2 years ago)
- Last Synced: 2025-03-18T07:43:08.465Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwindcss-break
- Size: 54.7 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Tailwind CSS Break Plugin
This plugin adds utilities to use break with Tailwind CSS.
## Installation
Add this plugin to your project:
```bash
# Install using pnpm
pnpm install --save-dev tailwindcss-break
# Install using npm
npm install --save-dev tailwindcss-break
# Install using yarn
yarn add -D tailwindcss-break
```
## Usage
```js
// tailwind.config.js
{
theme: { // defaults to these values
orphans: [ 1, 2, 3 ],
widows: [ 1, 2, 3 ],
boxDecorationBreak: [ 'slice', 'clone' ],
breakBefore: [
'auto', 'avoid', 'avoid-page', 'page', 'always', 'left', 'right',
'recto', 'verso', 'avoid-column', 'column', 'avoid-region', 'region',
],
breakAfter: [
'auto', 'avoid', 'avoid-page', 'page', 'always', 'left', 'right',
'recto', 'verso', 'avoid-column', 'column', 'avoid-region', 'region',
],
breakInside: [ 'auto', 'avoid', 'avoid-page', 'avoid-column', 'avoid-region' ],
},
variants: { // all the following default to ['responsive']
orphans: ['responsive'],
widows: ['responsive'],
boxDecorationBreak: ['responsive'],
breakBefore: ['responsive'],
breakAfter: ['responsive'],
breakInside: ['responsive'],
},
plugins: [
require('tailwindcss-break')(), // no options to configure
],
}
```
```css
.orphans-1 { orphans: 1; }
.orphans-2 { orphans: 2; }
.orphans-3 { orphans: 3; }
.widows-1 { widows: 1; }
.widows-2 { widows: 2; }
.widows-3 { widows: 3; }
.box-slice { box-decoration-break: slice; }
.box-clone { box-decoration-break: clone; }
.bb-auto { break-before: auto; }
.bb-avoid { break-before: avoid; }
.bb-avoid-page { break-before: avoid-page; }
.bb-page { break-before: page; }
.bb-always { break-before: always; }
.bb-left { break-before: left; }
.bb-right { break-before: right; }
.bb-recto { break-before: recto; }
.bb-verso { break-before: verso; }
.bb-avoid-column { break-before: avoid-column; }
.bb-column { break-before: column; }
.bb-avoid-region { break-before: avoid-region; }
.bb-region { break-before: region; }
.ba-auto { break-after: auto; }
.ba-avoid { break-after: avoid; }
.ba-avoid-page { break-after: avoid-page; }
.ba-page { break-after: page; }
.ba-always { break-after: always; }
.ba-left { break-after: left; }
.ba-right { break-after: right; }
.ba-recto { break-after: recto; }
.ba-verso { break-after: verso; }
.ba-avoid-column { break-after: avoid-column; }
.ba-column { break-after: column; }
.ba-avoid-region { break-after: avoid-region; }
.ba-region { break-after: region; }
.bi-auto { break-inside: auto; }
.bi-avoid { break-inside: avoid; }
.bi-avoid-page { break-inside: avoid-page; }
.bi-avoid-column { break-inside: avoid-column; }
.bi-avoid-region { break-inside: avoid-region; }
```