[TASK] styling login & user admin interface

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "liwest",
+  "name": "app.rudernlinz.at",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -9,13 +9,12 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
     "sass": "^1.60.0",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",
     "vite-plugin-static-copy": "^0.13.1"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.7",
-    "bootstrap": "^5.2.3"
   }
 }

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

frontend/scss/app.scss

@@ -1,3 +1,3 @@
-body {
-  background: red;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/tailwind.config.cjs

@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+const { colors } = require('tailwindcss/defaultTheme');
+
+export default {
+  content: ["../templates/**/*.{html,tera,js}"],
+  theme: {
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        black: '#000000',
+        white: '#ffffff',
+        gray: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+      }
+    },
+  },
+  plugins: [],
+}
+

frontend/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",