refactor: migrate UI to Tailwind CSS for a modernized design system.

webui/tailwind.config.js

@@ -0,0 +1,52 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                border: "var(--color-border)",
+                input: "var(--color-input)",
+                ring: "var(--color-ring)",
+                background: "var(--color-background)",
+                foreground: "var(--color-foreground)",
+                primary: {
+                    DEFAULT: "var(--color-primary)",
+                    foreground: "var(--color-primary-foreground)",
+                },
+                secondary: {
+                    DEFAULT: "var(--color-secondary)",
+                    foreground: "var(--color-secondary-foreground)",
+                },
+                destructive: {
+                    DEFAULT: "var(--color-destructive)",
+                    foreground: "var(--color-destructive-foreground)",
+                },
+                muted: {
+                    DEFAULT: "var(--color-muted)",
+                    foreground: "var(--color-muted-foreground)",
+                },
+                accent: {
+                    DEFAULT: "var(--color-accent)",
+                    foreground: "var(--color-accent-foreground)",
+                },
+                popover: {
+                    DEFAULT: "var(--color-popover)",
+                    foreground: "var(--color-popover-foreground)",
+                },
+                card: {
+                    DEFAULT: "var(--color-card)",
+                    foreground: "var(--color-card-foreground)",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+        },
+    },
+    plugins: [],
+}