feat: wire tailwind v4 with charcoal design tokens

src/index.css

@@ -0,0 +1,32 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg: #0b0b0d;
+  --color-surface: #141418;
+  --color-surface-elevated: #1c1c22;
+  --color-border: #2a2a31;
+  --color-border-strong: #3a3a44;
+  --color-text: #e8e8ec;
+  --color-muted: #9999a3;
+  --color-muted-strong: #c8c8d2;
+  --color-accent: #7c8cff;
+  --color-accent-hover: #93a0ff;
+  --color-danger: #ff6b6b;
+  --color-warning: #ffb84d;
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 24px rgba(0,0,0,0.25);
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+html, body, #root { height: 100%; }
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+}

vite.config.ts

@@ -1,32 +1,19 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
-// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
-// https://vite.dev/config/
 export default defineConfig(async () => ({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
-
-  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
-  //
-  // 1. prevent Vite from obscuring rust errors
   clearScreen: false,
-  // 2. tauri expects a fixed port, fail if that port is not available
   server: {
     port: 1420,
     strictPort: true,
     host: host || false,
     hmr: host
-      ? {
+      ? { protocol: "ws", host, port: 1421 }
-          protocol: "ws",
-          host,
-          port: 1421,
-        }
       : undefined,
-    watch: {
+    watch: { ignored: ["**/src-tauri/**"] },
-      // 3. tell Vite to ignore watching `src-tauri`
-      ignored: ["**/src-tauri/**"],
-    },
   },
 }));