-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
79 lines (78 loc) · 2.48 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: ['./pages/**/*.{vue,html}'],
media: false, // or 'media' or 'class'
defaultLineHeights: false,
theme: {
extend: {
boxShadow: {
el: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
},
zIndex: {
max: '999999',
},
colors: {
primary: '#FEDD00',
main: '#2f3542',
success: '#67c23a',
},
},
borderRadius: rem2rpx(defaultTheme.borderRadius),
columns: rem2rpx(defaultTheme.columns),
fontSize: rem2rpx(defaultTheme.fontSize),
lineHeight: rem2rpx(defaultTheme.lineHeight),
maxWidth: ({ theme, breakpoints }) => ({
...rem2rpx(defaultTheme.maxWidth({ theme, breakpoints })),
}),
spacing: rem2rpx(defaultTheme.spacing),
letterSpacing: rem2rpx(defaultTheme.letterSpacing),
},
variants: {},
plugins: [
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
function ({ addVariant, addUtilities }) {
addUtilities({
'.absolute-center': {
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
},
'.absolute-x-center': {
position: 'absolute',
left: '50%',
transform: 'translateX(-50%)',
},
})
},
],
corePlugins: {
preflight: false,
},
}
function rem2rpx(input, fontSize = 32) {
if (input == null) {
return input
}
switch (typeof input) {
case 'object':
if (Array.isArray(input)) {
return input.map(val => rem2rpx(val, fontSize))
} else {
const ret = {}
for (const key in input) {
ret[key] = rem2rpx(input[key])
ret['-' + key] = '-' + rem2rpx(input[key])
}
return ret
}
case 'string':
return input.replace(/(\d*\.?\d+)rem$/, (_, val) => {
return parseFloat(val) * fontSize + 'rpx' + ' /*' + parseFloat(val) * (fontSize / 2) + 'px*/'
})
default:
return input
}
}