feat(ui): migrate from Tailwind CSS to UnoCSS + Melt UI next-gen

ui/.prettierrc

@@ -4,7 +4,7 @@
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-svelte"],
   "overrides": [
     {
       "files": "*.svelte",
@@ -14,6 +14,5 @@
         "useTabs": false
       }
     }
-  ],
-  "tailwindStylesheet": "./src/app.css"
+  ]
 }

ui/package.json

@@ -19,9 +19,9 @@
     "@sveltejs/adapter-auto": "^6.0.0",
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.15",
-    "@tailwindcss/vite": "^4.0.0",
+    "@unocss/extractor-svelte": "^66.6.8",
+    "@unocss/preset-icons": "^66.6.8",
+    "@unocss/reset": "^66.6.8",
     "@vitest/browser": "^3.2.3",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.18.0",
@@ -32,18 +32,18 @@
     "postcss": "^8.5.6",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "tailwindcss": "^4.1.12",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.20.0",
+    "unocss": "^66.6.8",
     "vite": "^7.0.4",
     "vitest": "^3.2.3",
     "vitest-browser-svelte": "^0.1.0"
   },
   "dependencies": {
     "@holochain/client": "^0.20.0",
-    "@nondominium/shared-types": "workspace:*"
+    "@nondominium/shared-types": "workspace:*",
+    "melt": "^0.44.0"
   }
 }

ui/src/app.css

@@ -1 +1 @@
-@import 'tailwindcss';
+@import '@unocss/reset/tailwind.css';

ui/src/lib/components/HolochainProvider.svelte

@@ -94,7 +94,7 @@
         {#if !autoConnect}
           <button
             onclick={() => holochainService.connectClient()}
-            class="bg-green-60d0 ml-2 rounded px-3 py-1 text-white transition-colors hover:bg-green-700"
+            class="bg-green-600 ml-2 rounded px-3 py-1 text-white transition-colors hover:bg-green-700"
           >
             Connect
           </button>

ui/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import '../app.css';
+  import 'virtual:uno.css';
   import favicon from '$lib/assets/favicon.svg';
   import HolochainProvider from '$lib/components/HolochainProvider.svelte';
 

ui/uno.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig, presetUno, presetIcons } from 'unocss';
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetIcons({ scale: 1.2, warn: true })
+  ]
+});

ui/vite.config.ts

@@ -1,7 +1,11 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite';
+import UnoCSS from 'unocss/vite';
+import extractorSvelte from '@unocss/extractor-svelte';
 
 export default defineConfig({
-  plugins: [sveltekit(), tailwindcss()]
+  plugins: [
+    UnoCSS({ extractors: [extractorSvelte()] }),
+    sveltekit()
+  ]
 });