-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
61 lines (59 loc) · 1.69 KB
/
tailwind.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const plugin = require('tailwindcss/plugin')
const generateColor = (hue, saturation) => {
const result = {}
for (let i = 0; i <= 1000; i += 25) {
result[i] = `hsl(${hue}, ${saturation}%, ${100 - i / 10}%)`
}
return result
}
const apply = utilities => {
const result = {}
result[`@apply ${utilities}`] = {}
return result
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{tsx,jsx}'],
theme: {
extend: {
fontFamily: {},
colors: {
primary: generateColor(20, 50),
secondary: generateColor(70, 15),
gray: generateColor(50, 10)
}
}
},
plugins: [
plugin(({ addBase, addComponents, addUtilities }) => {
addBase({
html: {
fontFamily: `sans-serif`
}
})
addUtilities({
'.pad': {
padding: '0.5rem 1rem'
},
'.cols-l': {
gridTemplateColumns: 'max-content auto'
},
'.cols-c': {
gridTemplateColumns: 'max-content auto max-content'
},
'.cols-r': {
gridTemplateColumns: 'auto max-content'
},
'.rows-t': {
gridTemplateRows: 'max-content auto'
},
'.rows-b': {
gridTemplateRows: 'auto max-content'
},
'.rows-c': {
gridTemplateRows: 'max-content auto max-content'
}
})
})
]
}