chore: replace unocss with tailwind

app/package.json

@@ -14,29 +14,29 @@
     "@nodarium/ui": "link:../packages/ui",
     "@nodarium/utils": "link:../packages/utils",
     "@sveltejs/kit": "^2.50.0",
+    "@tailwindcss/vite": "^4.1.18",
     "@threlte/core": "8.3.1",
     "@threlte/extras": "9.7.1",
-    "@unocss/reset": "^66.6.0",
     "comlink": "^4.4.2",
     "file-saver": "^2.0.5",
     "idb": "^8.0.3",
     "jsondiffpatch": "^0.7.3",
+    "tailwindcss": "^4.1.18",
     "three": "^0.182.0"
   },
   "devDependencies": {
     "@iconify-json/tabler": "^1.2.26",
+    "@iconify/tailwind4": "^1.2.1",
     "@nodarium/types": "link:../packages/types",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.6",
     "@types/file-saver": "^2.0.7",
     "@types/three": "^0.182.0",
-    "@unocss/preset-icons": "^66.6.0",
     "svelte": "^5.46.4",
     "svelte-check": "^4.3.5",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "unocss": "^66.6.0",
     "vite": "^7.3.1",
     "vite-plugin-comlink": "^5.3.0",
     "vite-plugin-glsl": "^1.5.5",

app/src/app.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@source "../../packages/ui/**/*.svelte";
+@plugin "@iconify/tailwind4" {
+  prefix: "i";
+  icon-sets: from-folder(custom, "./src/lib/icons")
+};

app/src/lib/icons/graph.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
   <rect x="17" y="8" width="5" height="7" rx="1" stroke="currentColor" stroke-width="2"/> 
   <rect x="2" y="3" width="5" height="7" rx="1" stroke="currentColor" stroke-width="2"/> 
   <rect x="2" y="14" width="5" height="7" rx="1" stroke="currentColor" stroke-width="2"/> 

app/src/lib/sidebar/Panel.svelte

@@ -37,7 +37,7 @@
 <style>
   header {
     border-bottom: solid thin var(--outline);
-    height: 69px;
+    height: 70px;
     display: flex;
     align-items: center;
     padding-left: 1em;

app/src/lib/sidebar/Sidebar.svelte

@@ -55,7 +55,8 @@
         setActivePanel($activePanel ? false : keys[0]);
       }}
     >
-      <span class="absolute i-tabler-chevron-left w-6 h-6 block"></span>
+      <span class="icon-[tabler--settings]"></span>
+      <span class="absolute i-[tabler--chevron-left] w-6 h-6 block"></span>
     </button>
     {#each keys as panel (panels[panel].id)}
       {#if panels[panel].visible !== false}
@@ -65,7 +66,7 @@
           class:active={panel === $activePanel}
           on:click={() => setActivePanel(panel)}
         >
-          <span class={`block w-6 h-6 ${panels[panel].icon}`}></span>
+          <span class={`block w-6 h-6 iconify ${panels[panel].icon}`}></span>
         </button>
       {/if}
     {/each}

app/src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import "@nodarium/ui/app.css";
-  import "virtual:uno.css";
-  import "@unocss/reset/normalize.css";
+  import "../app.css";
 </script>
 
 <slot />

app/src/routes/+page.svelte

@@ -178,7 +178,7 @@
         onsave={(graph) => handleSave(graph)}
       />
       <Sidebar>
-        <Panel id="general" title="General" icon="i-tabler-settings">
+        <Panel id="general" title="General" icon="i-[tabler--settings]">
           <NestedSettings
             id="general"
             bind:value={appSettings.value}
@@ -188,7 +188,7 @@
         <Panel
           id="shortcuts"
           title="Keyboard Shortcuts"
-          icon="i-tabler-keyboard"
+          icon="i-[tabler--keyboard]"
         >
           <Keymap
             keymaps={[
@@ -197,23 +197,21 @@
             ]}
           />
         </Panel>
-        <Panel id="exports" title="Exporter" icon="i-tabler-package-export">
+        <Panel id="exports" title="Exporter" icon="i-[tabler--package-export]">
           <ExportSettings {scene} />
         </Panel>
         <Panel
           id="node-store"
-          classes="text-green-400"
           title="Node Store"
-          icon="i-tabler-database"
+          icon="i-[tabler--database] bg-green-400"
         >
           <NodeStore registry={nodeRegistry} />
         </Panel>
         <Panel
           id="performance"
           title="Performance"
-          classes="text-red-400"
           hidden={!appSettings.value.debug.showPerformancePanel}
-          icon="i-tabler-brand-speedtest"
+          icon="i-[tabler--brand-speedtest] bg-red-400"
         >
           {#if $performanceStore}
             <PerformanceViewer data={$performanceStore} />
@@ -223,24 +221,22 @@
           id="graph-source"
           title="Graph Source"
           hidden={!appSettings.value.debug.showGraphJson}
-          icon="i-tabler-code"
+          icon="i-[tabler--code]"
         >
           <GraphSource {graph} />
         </Panel>
         <Panel
           id="benchmark"
           title="Benchmark"
-          classes="text-red-400"
           hidden={!appSettings.value.debug.showBenchmarkPanel}
-          icon="i-tabler-graph"
+          icon="i-[tabler--graph] bg-red-400"
         >
           <BenchmarkPanel run={randomGenerate} />
         </Panel>
         <Panel
           id="graph-settings"
           title="Graph Settings"
-          classes="text-blue-400"
-          icon="i-custom-graph"
+          icon="i-[custom--graph] bg-blue-400"
         >
           <NestedSettings
             id="graph-settings"
@@ -251,8 +247,7 @@
         <Panel
           id="active-node"
           title="Node Settings"
-          classes="text-blue-400"
-          icon="i-tabler-adjustments"
+          icon="i-[tabler--adjustments] bg-blue-400"
         >
           <ActiveNodeSettings {manager} bind:node={activeNode} />
         </Panel>

app/src/routes/dev/+page.svelte

@@ -12,7 +12,7 @@
         id="node-store"
         classes="text-green-400"
         title="Node Store"
-        icon="i-tabler-database"
+        icon="i-[tabler--database]"
       >
         <div class="p-4">
           <input type="text" class="bg-red rounded-sm p-2" />

app/uno.config.ts

@@ -1,20 +0,0 @@
-// uno.config.ts
-import { defineConfig } from 'unocss'
-import presetIcons from '@unocss/preset-icons'
-import { presetUno } from 'unocss'
-import fs from 'fs'
-
-const icons = Object.fromEntries(fs.readdirSync('./src/lib/icons')
-  .map(name => [name.replace(".svg", ""), fs.readFileSync(`./src/lib/icons/${name}`, 'utf-8')]))
-
-
-export default defineConfig({
-  presets: [
-    presetUno(),
-    presetIcons({
-      collections: {
-        custom: icons
-      }
-    }),
-  ]
-})

app/vite.config.ts

@@ -1,14 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import UnoCSS from 'unocss/vite';
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite'
 import comlink from 'vite-plugin-comlink';
 import glsl from "vite-plugin-glsl";
 import wasm from "vite-plugin-wasm";
 
 export default defineConfig({
   plugins: [
+    tailwindcss(),
     comlink(),
-    UnoCSS(),
     sveltekit(),
     glsl(),
     wasm()