[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-multi-column. Multi-column utilities for Tailwind CSS.
www.npmjs.com/package/tailwindcss-multi-column
Add missing utilities for column-gap
Nestor Vera
(Aug 31, 2018, 6:37 PM +0200)
fde5e24c
afc92da2
+15
-1
+6
-1
index.js
+6
-1
index.js
···
2
2
3
3
module.exports = function (options = {}) {
4
4
return function ({ addUtilities, config, e }) {
5
-
let { counts, widths, rules, variants } = _.defaults(options, {
5
+
let { counts, gaps, widths, rules, variants } = _.defaults(options, {
6
6
counts: [1, 2, 3],
7
7
rules: {
8
8
colors: config('borderColors'),
···
17
17
[`.${e(`col-count-${count}`)}`]: { 'column-count': count },
18
18
}))
19
19
20
+
gaps = _.map(gaps, (gap, name) => ({
21
+
[`.${e(`col-gap${getName(name)}`)}`]: { 'column-gap': gap },
22
+
}))
23
+
20
24
widths = _.map(widths, (width, name) => ({
21
25
[`.${e(`col-w-${name}`)}`]: { 'column-width': width },
22
26
}))
···
30
34
}))
31
35
32
36
addUtilities(counts, variants)
37
+
addUtilities(gaps, variants)
33
38
addUtilities(widths, variants)
34
39
addUtilities(ruleColors, variants)
35
40
addUtilities(ruleWidths, variants)
+9
readme.md
+9
readme.md
···
24
24
```js
25
25
require('tailwindcss-multi-column')({
26
26
counts: [1, 2],
27
+
gaps: {
28
+
'sm': '1rem',
29
+
'md': '1.5rem',
30
+
'lg': '2rem',
31
+
},
27
32
widths: {
28
33
'sm': '120px',
29
34
'md': '240px',
···
49
54
.col-count-1 { column-count: 1; }
50
55
.col-count-2 { column-count: 2; }
51
56
.col-count-3 { column-count: 3; }
57
+
58
+
.col-gap-sm { column-gap: 1rem; }
59
+
.col-gap-md { column-gap: 1.5rem; }
60
+
.col-gap-lg { column-gap: 2rem; }
52
61
53
62
.col-w-sm { column-width: 120px; }
54
63
.col-w-md { column-width: 240px; }