💫 Migrate to TailwindCSS 4 and DaisyUI 5

app/package.json

@@ -32,13 +32,12 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.45.1",
         "jsdom": "^24.0.0",
-        "postcss": "^8.4.38",
         "prettier": "^3.1.1",
         "prettier-plugin-svelte": "^3.2.6",
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
         "svelte-focus-trap": "^1.2.0",
-        "tailwindcss": "^3.4.3",
+        "tailwindcss": "^4.0.12",
         "tslib": "^2.6.1",
         "typescript": "^5.5.0",
         "unplugin-icons": "^0.18.5",
@@ -48,10 +47,11 @@
     "type": "module",
     "dependencies": {
         "@niku/vite-env-caster": "^1.0.2",
+        "@tailwindcss/vite": "^4.0.12",
         "chart.js": "^4.4.2",
         "compare-versions": "^6.1.0",
         "cross-env": "^7.0.3",
-        "daisyui": "^4.10.2",
+        "daisyui": "^5.0.0",
         "jwt-decode": "^4.0.0",
         "nipplejs": "^0.10.1",
         "svelte-dnd-list": "^0.1.8",

app/postcss.config.js

@@ -1,5 +0,0 @@
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
-export default {
-	plugins: [tailwindcss(), autoprefixer()]
-};

app/src/app.css

@@ -1,9 +1,31 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@plugin "daisyui";
 
-#nipple_0_0, #nipple_1_1 {
-    z-index: 10!important;
+@plugin "daisyui" {
+    themes:
+        light --default,
+        dark --prefersdark;
+}
+
+@plugin "daisyui/theme" {
+    name: 'light';
+    default: true;
+    --color-primary: #00bfff;
+    --color-secondary: #3c00ff;
+    --base-content: white;
+}
+
+@plugin "daisyui/theme" {
+    name: 'dark';
+    prefersdark: true;
+    --color-primary: #00bfff;
+    --color-secondary: #3c00ff;
+    --base-content: oklch(0.3 0.012 256);
+}
+
+#nipple_0_0,
+#nipple_1_1 {
+    z-index: 10 !important;
 }
 
 #three-gui-panel {
@@ -15,4 +37,4 @@
     #three-gui-panel {
         top: 48px;
     }
-}
+}

app/src/lib/components/GithubUpdateDialog.svelte

@@ -84,7 +84,7 @@
             </div>
             <div class="divider my-2"></div>
             <div class="flex flex-wrap justify-end gap-2">
-                <div class="flex-grow"></div>
+                <div class="grow"></div>
                 <button
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
                     disabled={updating}

app/src/lib/components/Toast.svelte

@@ -28,7 +28,7 @@
 			in:fly={{ y: 100, duration: 400 }}
 			out:fly={{ x: 100, duration: 400 }}
 		>
-			<SvelteComponent class="h-6 w-6 flex-shrink-0" />
+			<SvelteComponent class="h-6 w-6 shrink-0" />
 			<span>{notification.message}</span>
 		</div>
 	{/each}

app/src/lib/components/menu/Menu.svelte

@@ -1,187 +1,178 @@
 <script lang="ts">
-    import { page } from '$app/state';
-    import { useFeatureFlags } from '$lib/stores/featureFlags';
-    import GithubButton from '../menu/GithubButton.svelte';
-    import LogoButton from '../menu/LogoButton.svelte';
-    import MenuList from '../menu/MenuList.svelte';
-    import {
-        Connection,
-        Settings,
-        MdiController,
-        Devices,
-        Camera,
-        Rotate3d,
-        MotorOutline,
-        Health,
-        Folder,
-        Update,
-        WiFi,
-        Router,
-        AP,
-        Remote,
-        Copyright,
-        Metrics
-    } from '$lib/components/icons';
-    import appEnv from 'app-env';
+  import { page } from '$app/state'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import GithubButton from '../menu/GithubButton.svelte'
+  import LogoButton from '../menu/LogoButton.svelte'
+  import MenuList from '../menu/MenuList.svelte'
+  import {
+    Connection,
+    Settings,
+    MdiController,
+    Devices,
+    Camera,
+    Rotate3d,
+    MotorOutline,
+    Health,
+    Folder,
+    Update,
+    WiFi,
+    Router,
+    AP,
+    Copyright,
+    Metrics
+  } from '$lib/components/icons'
+  import appEnv from 'app-env'
 
-    const features = useFeatureFlags();
+  const features = useFeatureFlags()
 
-    const appName = page.data.app_name;
+  const appName = page.data.app_name
 
-    const copyright = page.data.copyright;
+  const copyright = page.data.copyright
 
-    const github = { href: 'https://github.com/' + page.data.github, active: true };
+  const github = { href: 'https://github.com/' + page.data.github, active: true }
 
-    type menuItem = {
-        title: string;
-        icon: ConstructorOfATypedSvelteComponent;
-        href?: string;
-        feature: boolean;
-        active?: boolean;
-        submenu?: menuItem[];
-    };
+  type menuItem = {
+    title: string
+    icon: ConstructorOfATypedSvelteComponent
+    href?: string
+    feature: boolean
+    active?: boolean
+    submenu?: menuItem[]
+  }
 
-    let menuItems = $state<menuItem[]>([]);
+  let menuItems = $state<menuItem[]>([])
 
-    $effect(() => {
-        menuItems = [
-            {
-                title: 'Connection',
-                icon: WiFi,
-                href: '/connection',
-                feature: !appEnv.VITE_USE_HOST_NAME
-            },
-            {
-                title: 'Controller',
-                icon: MdiController,
-                href: '/controller',
-                feature: true
-            },
-            {
-                title: 'Peripherals',
-                icon: Devices,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'I2C',
-                        icon: Connection,
-                        href: '/peripherals/i2c',
-                        feature: true
-                    },
-                    {
-                        title: 'Camera',
-                        icon: Camera,
-                        href: '/peripherals/camera',
-                        feature: $features.camera
-                    },
-                    {
-                        title: 'Servo',
-                        icon: MotorOutline,
-                        href: '/peripherals/servo',
-                        feature: true
-                    },
-                    {
-                        title: 'IMU',
-                        icon: Rotate3d,
-                        href: '/peripherals/imu',
-                        feature: $features.imu || $features.mag || $features.bmp
-                    }
-                ]
-            },
-            {
-                title: 'WiFi',
-                icon: WiFi,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'WiFi Station',
-                        icon: Router,
-                        href: '/wifi/sta',
-                        feature: true
-                    },
-                    {
-                        title: 'Access Point',
-                        icon: AP,
-                        href: '/wifi/ap',
-                        feature: true
-                    }
-                ]
-            },
-            {
-                title: 'System',
-                icon: Settings,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'System Status',
-                        icon: Health,
-                        href: '/system/status',
-                        feature: true
-                    },
-                    {
-                        title: 'File System',
-                        icon: Folder,
-                        href: '/system/filesystem',
-                        feature: true
-                    },
-                    {
-                        title: 'System Metrics',
-                        icon: Metrics,
-                        href: '/system/metrics',
-                        feature: $features.analytics
-                    },
-                    {
-                        title: 'Firmware Update',
-                        icon: Update,
-                        href: '/system/update',
-                        feature:
-                            $features.ota ||
-                            $features.upload_firmware ||
-                            $features.download_firmware
-                    }
-                ]
-            }
-        ] as menuItem[];
-    });
+  $effect(() => {
+    menuItems = [
+      {
+        title: 'Connection',
+        icon: WiFi,
+        href: '/connection',
+        feature: !appEnv.VITE_USE_HOST_NAME
+      },
+      {
+        title: 'Controller',
+        icon: MdiController,
+        href: '/controller',
+        feature: true
+      },
+      {
+        title: 'Peripherals',
+        icon: Devices,
+        feature: true,
+        submenu: [
+          {
+            title: 'I2C',
+            icon: Connection,
+            href: '/peripherals/i2c',
+            feature: true
+          },
+          {
+            title: 'Camera',
+            icon: Camera,
+            href: '/peripherals/camera',
+            feature: $features.camera
+          },
+          {
+            title: 'Servo',
+            icon: MotorOutline,
+            href: '/peripherals/servo',
+            feature: true
+          },
+          {
+            title: 'IMU',
+            icon: Rotate3d,
+            href: '/peripherals/imu',
+            feature: $features.imu || $features.mag || $features.bmp
+          }
+        ]
+      },
+      {
+        title: 'WiFi',
+        icon: WiFi,
+        feature: true,
+        submenu: [
+          {
+            title: 'WiFi Station',
+            icon: Router,
+            href: '/wifi/sta',
+            feature: true
+          },
+          {
+            title: 'Access Point',
+            icon: AP,
+            href: '/wifi/ap',
+            feature: true
+          }
+        ]
+      },
+      {
+        title: 'System',
+        icon: Settings,
+        feature: true,
+        submenu: [
+          {
+            title: 'System Status',
+            icon: Health,
+            href: '/system/status',
+            feature: true
+          },
+          {
+            title: 'File System',
+            icon: Folder,
+            href: '/system/filesystem',
+            feature: true
+          },
+          {
+            title: 'System Metrics',
+            icon: Metrics,
+            href: '/system/metrics',
+            feature: $features.analytics
+          },
+          {
+            title: 'Firmware Update',
+            icon: Update,
+            href: '/system/update',
+            feature: $features.ota || $features.upload_firmware || $features.download_firmware
+          }
+        ]
+      }
+    ] as menuItem[]
+  })
 
-    const { menuClicked } = $props();
+  const { menuClicked } = $props()
 
-    function setActiveMenuItem(targetTitle: string) {
-        menuItems.forEach(item => {
-            item.active = item.title === targetTitle;
-            item.submenu?.forEach(subItem => {
-                subItem.active = subItem.title === targetTitle;
-            });
-        });
-        menuItems = menuItems;
-        menuClicked();
-    }
+  function setActiveMenuItem(targetTitle: string) {
+    menuItems.forEach(item => {
+      item.active = item.title === targetTitle
+      item.submenu?.forEach(subItem => {
+        subItem.active = subItem.title === targetTitle
+      })
+    })
+    menuItems = menuItems
+    menuClicked()
+  }
 
-    $effect(() => {
-        setActiveMenuItem(page.data.title);
-    });
+  $effect(() => {
+    setActiveMenuItem(page.data.title)
+  })
 
-    const updateMenu = (event: any) => {
-        setActiveMenuItem(event.details);
-    };
+  const updateMenu = (event: any) => {
+    setActiveMenuItem(event.details)
+  }
 </script>
 
-<div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
-    <LogoButton {appName} />
+<div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
+  <LogoButton {appName} />
 
-    <MenuList
-        {menuItems}
-        select={updateMenu}
-        class="flex-grow flex-nowrap overflow-y-auto"
-        level="0"
-    />
+  <MenuList {menuItems} select={updateMenu} class="grow flex-nowrap overflow-y-auto" level="0" />
 
-    <div class="divider my-0"></div>
+  <div class="divider my-0"></div>
 
-    <div class="flex items-center justify-between">
-        <GithubButton {github} />
-        <div class="flex items-center justify-end text-sm gap-2">
-            <Copyright class="h-4 w-4" />{copyright}
-        </div>
+  <div class="flex items-center justify-between">
+    <GithubButton {github} />
+    <div class="flex items-center justify-end text-sm gap-2">
+      <Copyright class="h-4 w-4" />{copyright}
     </div>
+  </div>
 </div>

app/src/lib/components/menu/MenuList.svelte

@@ -1,54 +1,48 @@
 <script lang="ts">
-    import MenuList from './MenuList.svelte';
-    type MenuItem = {
-        title: string;
-        icon: ConstructorOfATypedSvelteComponent;
-        href?: string;
-        feature: boolean;
-        active?: boolean;
-        submenu?: MenuItem[];
-    };
+  import MenuList from './MenuList.svelte'
+  type MenuItem = {
+    title: string
+    icon: ConstructorOfATypedSvelteComponent
+    href?: string
+    feature: boolean
+    active?: boolean
+    submenu?: MenuItem[]
+  }
 
-    let { level, menuItems, select, class: klass } = $props();
+  let { level, menuItems, select, class: klass } = $props()
 
-    const selectMenuItem = (title: string) => {
-        select(title);
-    };
+  const selectMenuItem = (title: string) => {
+    select(title)
+  }
 </script>
 
 <ul class={klass + ' menu'}>
-    {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
-        {#if menuItem.feature}
-            <li>
-                {#if menuItem.submenu}
-                    <details open={menuItem.submenu.some(subItem => subItem.active)}>
-                        <summary class="text-lg font-bold">
-                            <menuItem.icon class="h-6 w-6" />
-                            {menuItem.title}
-                        </summary>
-                        <div class="pl-4">
-                            <MenuList
-                                menuItems={menuItem.submenu}
-                                level={level + 1}
-                                {select}
-                                class={klass}
-                            />
-                        </div>
-                    </details>
-                {:else}
-                    <a
-                        href={menuItem.href}
-                        class="font-bold"
-                        class:bg-base-100={menuItem.active}
-                        class:text-lg={level === 0}
-                        class:text-md={level === 1}
-                        onclick={() => selectMenuItem(menuItem.title)}
-                    >
-                        <menuItem.icon class="h-6 w-6" />
-                        {menuItem.title}
-                    </a>
-                {/if}
-            </li>
+  {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
+    {#if menuItem.feature}
+      <li>
+        {#if menuItem.submenu}
+          <details open={menuItem.submenu.some(subItem => subItem.active)}>
+            <summary class="text-lg font-bold">
+              <menuItem.icon class="h-6 w-6" />
+              {menuItem.title}
+            </summary>
+            <div class="pl-4">
+              <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
+            </div>
+          </details>
+        {:else}
+          <a
+            href={menuItem.href}
+            class="font-bold"
+            class:bg-base-100={menuItem.active}
+            class:text-lg={level === 0}
+            class:text-md={level === 1}
+            onclick={() => selectMenuItem(menuItem.title)}>
+            <menuItem.icon class="h-6 w-6" />
+            {menuItem.title}
+          </a>
         {/if}
-    {/each}
+      </li>
+    {/if}
+  {/each}
 </ul>

app/src/lib/components/statusbar/statusbar.svelte

@@ -1,38 +1,38 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { telemetry } from '$lib/stores/telemetry';
+  import { page } from '$app/stores'
+  import { telemetry } from '$lib/stores/telemetry'
 
-    import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
-    import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte';
-    import SleepButton from './SleepButton.svelte';
-    import ThemeButton from './ThemeButton.svelte';
-    import FullscreenButton from './FullscreenButton.svelte';
-    import StopButton from './StopButton.svelte';
-    import ViewSelector from './ViewSelector.svelte';
-    import { Hamburger } from '../icons';
+  import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
+  import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
+  import SleepButton from './SleepButton.svelte'
+  import ThemeButton from './ThemeButton.svelte'
+  import FullscreenButton from './FullscreenButton.svelte'
+  import StopButton from './StopButton.svelte'
+  import ViewSelector from './ViewSelector.svelte'
+  import { Hamburger } from '../icons'
 </script>
 
 <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
-    <div class="flex-1 gap-2">
-        <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
-            <Hamburger class="h-6 w-auto" />
-        </label>
-        {#if $page.data.title === 'Controller'}
-            <ViewSelector />
-        {:else}
-            <h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
-        {/if}
-    </div>
+  <div class="flex flex-1 gap-2">
+    <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
+      <Hamburger class="h-6 w-auto" />
+    </label>
+    {#if $page.data.title === 'Controller'}
+      <ViewSelector />
+    {:else}
+      <h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
+    {/if}
+  </div>
 
-    <UpdateIndicator />
+  <UpdateIndicator />
 
-    <FullscreenButton />
+  <FullscreenButton />
 
-    <ThemeButton />
+  <ThemeButton />
 
-    <RssiIndicator rssi={$telemetry.rssi.rssi} />
+  <RssiIndicator rssi={$telemetry.rssi.rssi} />
 
-    <SleepButton />
+  <SleepButton />
 
-    <StopButton />
+  <StopButton />
 </div>

app/src/lib/components/toasts/Toast.svelte

@@ -28,7 +28,7 @@
 			in:fly={{ y: 100, duration: 400 }}
 			out:fly={{ x: 100, duration: 400 }}
 		>
-			<SvelteComponent class="h-6 w-6 flex-shrink-0" />
+			<SvelteComponent class="h-6 w-6 shrink-0" />
 			<span>{notification.message}</span>
 		</div>
 	{/each}

app/src/routes/+layout.svelte

@@ -115,7 +115,7 @@
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     {#snippet backdrop()}
         <div
-            class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur"
+            class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
             transition:fade
             onclick={modals.closeAll}
         ></div>

app/src/routes/system/update/GithubFirmwareManager.svelte

@@ -156,7 +156,7 @@
         </div>
     {:catch error}
         <div class="alert alert-error shadow-lg">
-            <Error class="h-6 w-6 flex-shrink-0" />
+            <Error class="h-6 w-6 shrink-0" />
             <span
                 >Please connect to a network with internet access to perform a firmware update.</span
             >

app/src/routes/system/update/UploadFirmware.svelte

@@ -39,7 +39,7 @@
         <span>Upload Firmware</span>
     {/snippet}
     <div class="alert alert-warning shadow-lg">
-        <Warning class="h-6 w-6 flex-shrink-0" />
+        <Warning class="h-6 w-6 shrink-0" />
         <span
             >Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
             a (.md5) file first to verify the uploaded firmware.

app/src/routes/wifi/sta/Scan.svelte

@@ -116,7 +116,7 @@
                                             Channel: {network.channel}
                                         </div>
                                     </div>
-                                    <div class="flex-grow"></div>
+                                    <div class="grow"></div>
                                     <RssiIndicator showDBm={true} rssi={network.rssi} />
                                 </div>
                             </li>
@@ -134,7 +134,7 @@
                     <Reload class="mr-2 h-5 w-5" /><span>Scan again</span>
                 </button>
 
-                <div class="flex-grow"></div>
+                <div class="grow"></div>
                 <button
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
                     onclick={() => modals.close()}

app/src/routes/wifi/sta/Wifi.svelte

@@ -495,7 +495,7 @@
                                 <div>
                                     <div class="font-bold">{dndNetworkList[index].ssid}</div>
                                 </div>
-                                <div class="flex-grow"></div>
+                                <div class="grow"></div>
                                 <div class="space-x-0 px-0 mx-0">
                                     <button
                                         class="btn btn-ghost btn-sm"

app/tailwind.config.js

@@ -1,32 +0,0 @@
-import daisyui from 'daisyui';
-import { light, dark } from 'daisyui/src/theming/themes';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: ['./src/**/*.{html,js,ts,svelte}'],
-    theme: {
-        extend: {}
-    },
-    plugins: [daisyui],
-    daisyui: {
-        themes: [
-            {
-                light: {
-                    ...light,
-                    primary: '#00bfff',
-                    accent: '#3c00ff',
-                    'base-content': 'oklch(0.3 0.012 256)'
-                }
-            },
-            {
-                dark: {
-                    ...dark,
-                    primary: '#00bfff',
-                    accent: '#3c00ff',
-                    'base-content': 'white'
-                }
-            }
-        ],
-        darkTheme: 'dark'
-    }
-};

app/vite.config.ts

@@ -3,9 +3,11 @@ import { defineConfig } from 'vite';
 import Icons from 'unplugin-icons/vite';
 import viteLittleFS from './vite-plugin-littlefs';
 import EnvCaster from '@niku/vite-env-caster';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
     plugins: [
+        tailwindcss(),
         sveltekit(),
         Icons({
             compiler: 'svelte'