refactor(css): refactored windicss to tailwindcss

2025-08-26 08:36:19 +08:00 · 2021-06-20 21:36:52 +08:00
parent e8d6f8851e
commit 893f3c79e7
17 changed files with 3075 additions and 1425 deletions
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,81 @@
+const 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,
+      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 };
+}