Switch Tailwind to npm/PostCSS, remove CDN, add concurrent dev workflow, and fix config errors

package.json

@@ -3,13 +3,19 @@
   "version": "2.3.4",
   "description": "Lightweight monitor for Proxmox",
   "scripts": {
-    "dev": "NODE_ENV=development cd server && node index.js",
-    "start": "cd server && node index.js"
+    "dev": "concurrently \"npm:dev:server\" \"npm:dev:css\"",
+    "dev:server": "NODE_ENV=development cd server && node index.js",
+    "start": "cd server && node index.js",
+    "build:css": "tailwindcss -i ./src/index.css -o ./public/output.css --minify",
+    "dev:css": "tailwindcss -i ./src/index.css -o ./public/output.css --watch"
   },
   "dependencies": {
     "dotenv": "^16.0.0"
   },
   "devDependencies": {
-    "tailwindcss": "^4.1.4"
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.1.2",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.4"
   }
 }

postcss.config.js

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

public/index.html

@@ -5,31 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pulse</title>
   <link rel="icon" href="/logo.svg" type="image/svg+xml">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    // Configure Tailwind CSS
-    tailwind.config = {
-      darkMode: 'class', // Use 'dark-mode' class on body for toggling
-      theme: {
-        extend: {
-          // Map CSS variables to Tailwind colors or add custom ones if needed
-          // Example: You might map --highlight-color here if used frequently
-          // colors: {
-          //   highlight: {
-          //     DEFAULT: 'var(--highlight-color)', // Reference existing CSS vars
-          //     text: 'var(--highlight-text)'
-          //   },
-          //   error: {
-          //     DEFAULT: 'var(--error-color)',
-          //     text: 'var(--error-text)'
-          //   },
-          //   // ... add others as needed
-          // }
-          // For simplicity now, we'll rely on Tailwind defaults + direct variable usage where simple
-        }
-      }
-    }
-  </script>
+  <link rel="stylesheet" href="/output.css">
   <style>
     /* Remove all old CSS rules. Keep the style tag empty or remove it entirely */
     /* Tailwind utilities will handle styling */

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities; 

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './public/**/*.html',
+    './public/**/*.js',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+