| 提交 | 用户 | 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 | } | |
