fix: use Tailwind v3 for Linux server builds

package.json

@@ -19,9 +19,10 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.7",
     "@vitejs/plugin-vue": "^5.2.1",
-    "tailwindcss": "^4.1.7",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.7.3",
     "vite": "^6.0.7",
     "vue-tsc": "^2.2.0"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/components/shell/AppShell.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mx-auto flex min-h-dvh w-full max-w-[768px] flex-col bg-surface shadow-xl shadow-black/5 dark:shadow-black/30"
+    class="mx-auto flex min-h-dvh w-full max-w-app flex-col bg-surface shadow-xl shadow-black/5 dark:shadow-black/30"
   >
     <slot />
   </div>

src/styles/main.css

@@ -1,16 +1,8 @@
-@import 'tailwindcss';
+@tailwind base;
-
+@tailwind components;
-@custom-variant dark (&:where(.dark, .dark *));
+@tailwind utilities;
-
-@theme {
-  --font-sans: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
-
-  --color-brand-50: #ecfdf5;
-  --color-brand-100: #d1fae5;
-  --color-brand-500: #22c55e;
-  --color-brand-600: #16a34a;
-  --color-brand-700: #15803d;
 
+:root {
   --color-surface: #ffffff;
   --color-surface-2: #f8fafc;
   --color-surface-3: #f1f5f9;
@@ -19,15 +11,13 @@
   --color-muted: #64748b;
 }
 
-@layer theme {
+.dark {
-  .dark {
+  --color-surface: #0f1419;
-    --color-surface: #0f1419;
+  --color-surface-2: #1a2332;
-    --color-surface-2: #1a2332;
+  --color-surface-3: #243044;
-    --color-surface-3: #243044;
+  --color-border: #334155;
-    --color-border: #334155;
+  --color-text: #f1f5f9;
-    --color-text: #f1f5f9;
+  --color-muted: #94a3b8;
-    --color-muted: #94a3b8;
-  }
 }
 
 @layer base {
@@ -36,7 +26,7 @@
   }
 
   body {
-    @apply bg-surface-2 text-text font-sans;
+    @apply bg-surface-2 font-sans text-text;
   }
 
   #app {

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Vazirmatn', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        brand: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+        },
+        surface: {
+          DEFAULT: 'var(--color-surface)',
+          2: 'var(--color-surface-2)',
+          3: 'var(--color-surface-3)',
+        },
+        border: 'var(--color-border)',
+        text: 'var(--color-text)',
+        muted: 'var(--color-muted)',
+      },
+      maxWidth: {
+        app: '768px',
+      },
+    },
+  },
+  plugins: [],
+};

vite.config.ts

@@ -1,13 +1,12 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import tailwindcss from '@tailwindcss/vite';
 import { fileURLToPath, URL } from 'node:url';
 
 export default defineConfig(({ mode }) => ({
   build: {
     outDir: mode === 'admin' ? 'dist-admin' : 'dist',
   },
-  plugins: [vue(), tailwindcss()],
+  plugins: [vue()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),