提交 | 用户 | age
|
f9cda2
|
1 |
const { sky: color_sky, ...colors } = require('tailwindcss/colors'); |
ec9478
|
2 |
|
893f3c
|
3 |
module.exports = { |
V |
4 |
mode: 'jit', |
|
5 |
// darkMode: 'class', |
|
6 |
plugins: [createEnterPlugin()], |
|
7 |
purge: { |
|
8 |
enabled: false, |
|
9 |
content: ['./index.html', './src/**/*.{vue,ts,tsx}'], |
|
10 |
}, |
ec9478
|
11 |
theme: { |
V |
12 |
extend: { |
893f3c
|
13 |
zIndex: { |
V |
14 |
'-1': '-1', |
c41fa7
|
15 |
}, |
a09a0e
|
16 |
}, |
893f3c
|
17 |
colors: { |
f9cda2
|
18 |
...colors, |
V |
19 |
sky: color_sky, |
893f3c
|
20 |
primary: { |
V |
21 |
DEFAULT: '#0960bd', |
|
22 |
// dark: primaryColorDark, |
|
23 |
}, |
|
24 |
}, |
|
25 |
screens: { |
|
26 |
sm: '576px', |
|
27 |
md: '768px', |
|
28 |
lg: '992px', |
|
29 |
xl: '1200px', |
|
30 |
'2xl': '1600px', |
|
31 |
}, |
ec9478
|
32 |
}, |
893f3c
|
33 |
}; |
ec9478
|
34 |
/** |
V |
35 |
* Used for animation when the element is displayed |
|
36 |
* @param maxOutput The larger the maxOutput output, the larger the generated css volume |
|
37 |
*/ |
893f3c
|
38 |
function createEnterPlugin(maxOutput = 6) { |
V |
39 |
const createCss = (index, d = 'x') => { |
ec9478
|
40 |
const upd = d.toUpperCase(); |
V |
41 |
return { |
|
42 |
[`*> .enter-${d}:nth-child(${index})`]: { |
|
43 |
transform: `translate${upd}(50px)`, |
|
44 |
}, |
|
45 |
[`*> .-enter-${d}:nth-child(${index})`]: { |
|
46 |
transform: `translate${upd}(-50px)`, |
|
47 |
}, |
|
48 |
[`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { |
|
49 |
'z-index': `${10 - index}`, |
|
50 |
opacity: '0', |
|
51 |
animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, |
|
52 |
'animation-fill-mode': 'forwards', |
|
53 |
'animation-delay': `${(index * 1) / 10}s`, |
|
54 |
}, |
|
55 |
}; |
|
56 |
}; |
|
57 |
const handler = ({ addBase }) => { |
8ccf77
|
58 |
const addRawCss = {}; |
ec9478
|
59 |
for (let index = 1; index < maxOutput; index++) { |
8ccf77
|
60 |
Object.assign(addRawCss, { |
ec9478
|
61 |
...createCss(index, 'x'), |
V |
62 |
...createCss(index, 'y'), |
|
63 |
}); |
|
64 |
} |
|
65 |
addBase({ |
8ccf77
|
66 |
...addRawCss, |
ec9478
|
67 |
[`@keyframes enter-x-animation`]: { |
V |
68 |
to: { |
|
69 |
opacity: '1', |
|
70 |
transform: 'translateX(0)', |
|
71 |
}, |
|
72 |
}, |
|
73 |
[`@keyframes enter-y-animation`]: { |
|
74 |
to: { |
|
75 |
opacity: '1', |
|
76 |
transform: 'translateY(0)', |
|
77 |
}, |
|
78 |
}, |
|
79 |
}); |
|
80 |
}; |
|
81 |
return { handler }; |
|
82 |
} |