chore: update to tailwindcss v4

packages/frontend/package.json

@@ -29,6 +29,7 @@
     "@podman-desktop/ui-svelte": "1.15.0",
     "@sveltejs/vite-plugin-svelte": "4.0.2",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.6",
@@ -43,15 +44,13 @@
     "humanize-duration": "^3.32.1",
     "jsdom": "^26.0.0",
     "moment": "^2.30.1",
-    "postcss": "^8.5.1",
-    "postcss-load-config": "^6.0.1",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "svelte": "5.19.5",
     "svelte-fa": "^4.0.3",
     "svelte-markdown": "^0.4.1",
     "svelte-preprocess": "^6.0.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.1",
     "vite": "^5.4.11",
     "vitest": "^2.1.8",
     "@xterm/xterm": "^5.5.0",

packages/frontend/src/Build.svelte

@@ -731,7 +731,7 @@ $: if (availableArchitectures) {
                     disabled={!availableArchitectures.includes('arm64')} />
                   <label
                     for="arm64"
-                    class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-none border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
+                    class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-hidden border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
                       'arm64',
                     )
                       ? 'border-2 cursor-pointer'
@@ -754,7 +754,7 @@ $: if (availableArchitectures) {
                     disabled={!availableArchitectures.includes('amd64')} />
                   <label
                     for="amd64"
-                    class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-none border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
+                    class="h-full flex items-center p-5 cursor-pointer rounded-md bg-[var(--pd-content-card-inset-bg)] focus:outline-hidden border-[var(--pd-content-card-border-selected)] peer-checked:bg-[var(--pd-content-card-hover-inset-bg)] {availableArchitectures.includes(
                       'amd64',
                     )
                       ? 'border-2 cursor-pointer'

packages/frontend/src/Navigation.svelte

@@ -6,7 +6,7 @@ export let meta: TinroRouteMeta;
 </script>
 
 <nav
-  class="z-1 w-leftsidebar min-w-leftsidebar shadow flex-col justify-between flex bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
+  class="z-1 w-leftsidebar min-w-leftsidebar shadow-sm flex-col justify-between flex bg-[var(--pd-secondary-nav-bg)] border-[var(--pd-global-nav-bg-border)] border-r-[1px]"
   aria-label="Navigation">
   <div class="flex items-center">
     <a href="/" title="Navigate to dashboard" class="pt-4 pl-3 px-5 mb-10 flex items-center ml-[4px]">

packages/frontend/src/app.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.cjs';
+

packages/frontend/src/lib/BootcStatusIcon.svelte

@@ -19,7 +19,7 @@ $: solid =
 
 <div class="grid place-content-center" style="position:relative">
   <div
-    class="grid place-content-center rounded aspect-square text-xs"
+    class="grid place-content-center rounded-sm aspect-square text-xs"
     class:bg-green-600={status === 'success'}
     class:bg-sky-400={status === 'running'}
     class:bg-red-600={status === 'error'}

packages/frontend/src/lib/ExampleCard.svelte

@@ -67,7 +67,7 @@ onMount(async () => {
 
 <div class="no-underline">
   <div
-    class="bg-[var(--pd-content-card-bg)] hover:bg-[var(--pd-content-card-hover-bg)] flex-grow p-4 h-full rounded-md flex-nowrap flex flex-col"
+    class="bg-[var(--pd-content-card-bg)] hover:bg-[var(--pd-content-card-hover-bg)] grow p-4 h-full rounded-md flex-nowrap flex flex-col"
     role="region"
     aria-label={example.name}>
     <!-- Show 'architectures' in small font at the bottom-->

packages/frontend/vite.config.js

@@ -23,6 +23,7 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineConfig } from 'vite';
 import { fileURLToPath } from 'url';
+import tailwindcss from '@tailwindcss/vite'
 
 let filename = fileURLToPath(import.meta.url);
 const PACKAGE_ROOT = path.dirname(filename);
@@ -37,7 +38,7 @@ export default defineConfig({
       '/@shared/': join(PACKAGE_ROOT, '../shared') + '/',
     },
   },
-  plugins: [svelte({ hot: !process.env.VITEST }), svelteTesting()],
+  plugins: [tailwindcss(), svelte({ hot: !process.env.VITEST }), svelteTesting()],
   optimizeDeps: {
     exclude: [],
   },