first draft

tailwind.config.js

@@ -0,0 +1,49 @@
+//copy from main project
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'selector', // Enable class-based dark mode (you can also use 'media' for OS preference)
+    content: [
+      "./src/**/*.{html,ts,scss}"
+    ],
+    theme: {
+      extend: {
+        animation: {
+          'fadein': 'fadein 0.5s ease-in-out',
+          'fadeout': 'fadeout 0.5s ease-in-out',
+          'fadeinleft': 'fadeinleft 0.5s ease-in-out',
+          'fadeinright': 'fadeinright 0.5s ease-in-out',
+          'fadeintop': 'fadeintop 0.5s ease-in-out',
+          'fadeinbottom': 'fadeinbottom 0.5s ease-in-out',
+        },
+        keyframes: {
+          'fadein': {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 1 },
+          },
+          'fadeout': {
+            '0%': { opacity: 1 },
+            '100%': { opacity: 0 },
+          },
+          'fadeinleft': {
+            '0%': { opacity: 0, transform: 'translateX(-100%)' },
+            '100%': { opacity: 1, transform: 'translateX(0)' },
+          },
+          'fadeinright': {
+            '0%': { opacity: 0, transform: 'translateX(100%)' },
+            '100%': { opacity: 1, transform: 'translateX(0)' },
+          },
+          'fadeintop': {
+            '0%': { opacity: 0, transform: 'translateY(-100%)' },
+            '100%': { opacity: 1, transform: 'translateY(0)' },
+          },
+          'fadeinbottom': {
+            '0%': { opacity: 0, transform: 'translateY(100%)' },
+            '100%': { opacity: 1, transform: 'translateY(0)' },
+          },
+        },
+      },
+    },
+    plugins: [
+      require('tailwindcss-primeui')
+    ],
+  };