[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-break. Break utilities for Tailwind CSS.
www.npmjs.com/package/tailwindcss-break
Init repository
Nestor Vera
(Aug 31, 2018, 2:12 PM +0200)
b23fe3be
+146
+57
index.js
+57
index.js
···
1
+
module.exports = function (variants) {
2
+
return function ({ addUtilities }) {
3
+
addUtilities(
4
+
{
5
+
// Break Before: Generic Values
6
+
'.bb-auto': { breakBefore: 'auto' },
7
+
'.bb-avoid': { breakBefore: 'avoid' },
8
+
9
+
// Break Before: Page Values
10
+
'.bb-avoid-page': { breakBefore: 'avoid-page' },
11
+
'.bb-page': { breakBefore: 'page' },
12
+
'.bb-always': { breakBefore: 'always' },
13
+
'.bb-left': { breakBefore: 'left' },
14
+
'.bb-right': { breakBefore: 'right' },
15
+
'.bb-recto': { breakBefore: 'recto' },
16
+
'.bb-verso': { breakBefore: 'verso' },
17
+
18
+
// Break Before: Column Values
19
+
'.bb-avoid-column': { breakBefore: 'avoid-column' },
20
+
'.bb-column': { breakBefore: 'column' },
21
+
22
+
// Break Before: Region Values
23
+
'.bb-avoid-region': { breakBefore: 'avoid-region' },
24
+
'.bb-region': { breakBefore: 'region' },
25
+
26
+
// Break After: Generic Values
27
+
'.ba-auto': { breakAfter: 'auto' },
28
+
'.ba-avoid': { breakAfter: 'avoid' },
29
+
30
+
// Break After: Page Values
31
+
'.ba-avoid-page': { breakAfter: 'avoid-page' },
32
+
'.ba-page': { breakAfter: 'page' },
33
+
'.ba-always': { breakAfter: 'always' },
34
+
'.ba-left': { breakAfter: 'left' },
35
+
'.ba-right': { breakAfter: 'right' },
36
+
'.ba-recto': { breakAfter: 'recto' },
37
+
'.ba-verso': { breakAfter: 'verso' },
38
+
39
+
// Break After: Column Values
40
+
'.ba-avoid-column': { breakAfter: 'avoid-column' },
41
+
'.ba-column': { breakAfter: 'column' },
42
+
43
+
// Break After: Region Values
44
+
'.ba-avoid-region': { breakAfter: 'avoid-region' },
45
+
'.ba-region': { breakAfter: 'region' },
46
+
47
+
// Break Inside
48
+
'.bi-auto': { breakInside: 'auto' },
49
+
'.bi-avoid': { breakInside: 'avoid' },
50
+
'.bi-avoid-page': { breakInside: 'avoid-page' },
51
+
'.bi-avoid-column': { breakInside: 'avoid-column' },
52
+
'.bi-avoid-region': { breakInside: 'avoid-region' },
53
+
},
54
+
variants
55
+
)
56
+
}
57
+
}
+27
package.json
+27
package.json
···
1
+
{
2
+
"name": "tailwindcss-break",
3
+
"version": "0.1.0",
4
+
"description": "Break utilities for Tailwind CSS.",
5
+
"main": "index.js",
6
+
"repository": {
7
+
"type": "git",
8
+
"url": "git+https://github.com/hacknug/tailwindcss-break.git"
9
+
},
10
+
"keywords": [
11
+
"tailwind",
12
+
"tailwindcss",
13
+
"tailwind css",
14
+
"tailwindcss-plugin",
15
+
"plugin"
16
+
],
17
+
"author": {
18
+
"name": "Nestor Vera",
19
+
"email": "nestorvera@me.com",
20
+
"url": "https://nestor.rip/"
21
+
},
22
+
"license": "MIT",
23
+
"bugs": {
24
+
"url": "https://github.com/hacknug/tailwindcss-break/issues"
25
+
},
26
+
"homepage": "https://github.com/hacknug/tailwindcss-break#readme"
27
+
}
+60
readme.md
+60
readme.md
···
1
+
# Tailwind CSS Break Plugin
2
+
3
+
This plugin adds utilities to use break with Tailwind CSS.
4
+
5
+
## Installation
6
+
7
+
Add this plugin to your project:
8
+
9
+
```bash
10
+
# Install using pnpm
11
+
pnpm install --save-dev tailwindcss-break
12
+
13
+
# Install using npm
14
+
npm install --save-dev tailwindcss-break
15
+
16
+
# Install using yarn
17
+
yarn add -D tailwindcss-break
18
+
```
19
+
20
+
## Usage
21
+
22
+
```js
23
+
require('tailwindcss-break')(['responsive'])
24
+
```
25
+
26
+
```css
27
+
.bb-auto { break-before: auto; }
28
+
.bb-avoid { break-before: avoid; }
29
+
.bb-avoid-page { break-before: avoid-page; }
30
+
.bb-page { break-before: page; }
31
+
.bb-always { break-before: always; }
32
+
.bb-left { break-before: left; }
33
+
.bb-right { break-before: right; }
34
+
.bb-recto { break-before: recto; }
35
+
.bb-verso { break-before: verso; }
36
+
.bb-avoid-column { break-before: avoid-column; }
37
+
.bb-column { break-before: column; }
38
+
.bb-avoid-region { break-before: avoid-region; }
39
+
.bb-region { break-before: region; }
40
+
41
+
.ba-auto { break-after: auto; }
42
+
.ba-avoid { break-after: avoid; }
43
+
.ba-avoid-page { break-after: avoid-page; }
44
+
.ba-page { break-after: page; }
45
+
.ba-always { break-after: always; }
46
+
.ba-left { break-after: left; }
47
+
.ba-right { break-after: right; }
48
+
.ba-recto { break-after: recto; }
49
+
.ba-verso { break-after: verso; }
50
+
.ba-avoid-column { break-after: avoid-column; }
51
+
.ba-column { break-after: column; }
52
+
.ba-avoid-region { break-after: avoid-region; }
53
+
.ba-region { break-after: region; }
54
+
55
+
.bi-auto { break-inside: auto; }
56
+
.bi-avoid { break-inside: avoid; }
57
+
.bi-avoid-page { break-inside: avoid-page; }
58
+
.bi-avoid-column { break-inside: avoid-column; }
59
+
.bi-avoid-region { break-inside: avoid-region; }
60
+
```