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
80
81
82
| const { sky: color_sky, ...colors } = require('tailwindcss/colors');
|
| module.exports = {
| mode: 'jit',
| // darkMode: 'class',
| plugins: [createEnterPlugin()],
| purge: {
| enabled: false,
| content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
| },
| theme: {
| extend: {
| zIndex: {
| '-1': '-1',
| },
| },
| colors: {
| ...colors,
| sky: color_sky,
| primary: {
| DEFAULT: '#0960bd',
| // dark: primaryColorDark,
| },
| },
| screens: {
| sm: '576px',
| md: '768px',
| lg: '992px',
| xl: '1200px',
| '2xl': '1600px',
| },
| },
| };
| /**
| * Used for animation when the element is displayed
| * @param maxOutput The larger the maxOutput output, the larger the generated css volume
| */
| function createEnterPlugin(maxOutput = 6) {
| const createCss = (index, d = 'x') => {
| const upd = d.toUpperCase();
| return {
| [`*> .enter-${d}:nth-child(${index})`]: {
| transform: `translate${upd}(50px)`,
| },
| [`*> .-enter-${d}:nth-child(${index})`]: {
| transform: `translate${upd}(-50px)`,
| },
| [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
| 'z-index': `${10 - index}`,
| opacity: '0',
| animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
| 'animation-fill-mode': 'forwards',
| 'animation-delay': `${(index * 1) / 10}s`,
| },
| };
| };
| const handler = ({ addBase }) => {
| const addRawCss = {};
| for (let index = 1; index < maxOutput; index++) {
| Object.assign(addRawCss, {
| ...createCss(index, 'x'),
| ...createCss(index, 'y'),
| });
| }
| addBase({
| ...addRawCss,
| [`@keyframes enter-x-animation`]: {
| to: {
| opacity: '1',
| transform: 'translateX(0)',
| },
| },
| [`@keyframes enter-y-animation`]: {
| to: {
| opacity: '1',
| transform: 'translateY(0)',
| },
| },
| });
| };
| return { handler };
| }
|
|
