chore: update types

internal/tailwind-config/package.json

@@ -44,6 +44,9 @@
     },
     "./*": "./*"
   },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.3"
+  },
   "dependencies": {
     "@iconify/json": "^2.2.215",
     "@iconify/tailwind": "^1.1.1",

internal/tailwind-config/src/index.ts

@@ -8,6 +8,8 @@ import typographyPlugin from '@tailwindcss/typography';
 import { fs, getPackagesSync } from '@vben/node-utils';
 import animate from 'tailwindcss-animate';
 
+import { enterAnimationPlugin } from './plugins/entry';
+
 // import defaultTheme from 'tailwindcss/defaultTheme';
 
 const { packages } = getPackagesSync();
@@ -29,7 +31,13 @@ export default {
     ),
   ],
   darkMode: 'class',
-  plugins: [animate, formsPlugin, typographyPlugin, addDynamicIconSelectors()],
+  plugins: [
+    animate,
+    formsPlugin,
+    typographyPlugin,
+    addDynamicIconSelectors(),
+    enterAnimationPlugin,
+  ],
   prefix: '',
   safelist: ['dark'],
   theme: {

internal/tailwind-config/src/plugins/entry.ts

@@ -0,0 +1,53 @@
+import plugin from 'tailwindcss/plugin.js';
+
+const enterAnimationPlugin = plugin(({ addUtilities }) => {
+  const maxChild = 5;
+  const utilities: Record<string, any> = {};
+  for (let i = 1; i <= maxChild; i++) {
+    const baseDelay = 0.1;
+    const delay = `${baseDelay * i}s`;
+
+    utilities[`.enter-x:nth-child(${i})`] = {
+      animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateX(50px)`,
+    };
+
+    utilities[`.enter-y:nth-child(${i})`] = {
+      animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateY(50px)`,
+    };
+
+    utilities[`.-enter-x:nth-child(${i})`] = {
+      animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateX(-50px)`,
+    };
+
+    utilities[`.-enter-y:nth-child(${i})`] = {
+      animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateY(-50px)`,
+    };
+  }
+
+  // 添加动画关键帧
+  addUtilities(utilities);
+  addUtilities({
+    '@keyframes enter-x-animation': {
+      to: {
+        opacity: '1',
+        transform: 'translateX(0)',
+      },
+    },
+    '@keyframes enter-y-animation': {
+      to: {
+        opacity: '1',
+        transform: 'translateY(0)',
+      },
+    },
+  });
+});
+
+export { enterAnimationPlugin };