[WIP] Upgrade to Tailwind v4

package.json

@@ -21,7 +21,10 @@
         "prettier": "^3.0.1",
         "prettier-plugin-blade": "^2.0.0",
         "prettier-plugin-tailwindcss": "^0.5.11",
-        "tailwindcss": "^3.4.13",
+        "tailwindcss": "^4.0.3",
         "vite": "^5.4"
+    },
+    "dependencies": {
+        "@tailwindcss/vite": "^4.0.3"
     }
 }

public/build/manifest.json

@@ -1,16 +1,16 @@
 {
   "resources/css/cachet.css": {
-    "file": "assets/cachet-Df9g2n5M.css",
+    "file": "assets/cachet-7IAF-ZTS.css",
     "src": "resources/css/cachet.css",
     "isEntry": true
   },
   "resources/css/dashboard/theme.css": {
-    "file": "assets/theme-CYlkUfJB.css",
+    "file": "assets/theme-si4XADgW.css",
     "src": "resources/css/dashboard/theme.css",
     "isEntry": true
   },
   "resources/js/cachet.js": {
-    "file": "assets/cachet-DCZQ8JcZ.js",
+    "file": "assets/cachet-Di3k1-Q7.js",
     "name": "cachet",
     "src": "resources/js/cachet.js",
     "isEntry": true

resources/css/cachet.css

@@ -1,10 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config '../../tailwind.config.js';
 
 @layer components {
     .button {
-        @apply flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+        @apply flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
     }
 
     .button--primary {

resources/css/dashboard/theme.css

@@ -1,6 +1,7 @@
-@import '/vendor/filament/filament/resources/css/theme.css';
+@import '../../../vendor/filament/filament/resources/css/theme.css';
+@import 'tailwindcss';
 
-@config 'tailwind.config.js';
+@config '../../../tailwind.config.js';
 
 .theme-swatch {
     @apply inline-flex w-4 h-4 rounded-full mr-2 bg-[rgb(var(--swatch))];

resources/views/components/component-group.blade.php

@@ -16,7 +16,7 @@
         </button>
 
         @if(($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
-        <span class="rounded border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
+        <span class="rounded-sm border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
             {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
         </span>
         @endif

resources/views/components/component.blade.php

@@ -10,7 +10,7 @@
                         <button x-ref="anchor" x-popover:button>
                             <x-heroicon-o-question-mark-circle class="size-4 text-zinc-500 dark:text-zinc-300" />
                         </button>
-                        <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="rounded bg-zinc-900 dark:bg-zinc-200 px-2 py-1 text-xs font-medium text-zinc-100 drop-shadow dark:text-zinc-800">
+                        <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="rounded-sm bg-zinc-900 dark:bg-zinc-200 px-2 py-1 text-xs font-medium text-zinc-100 drop-shadow-sm dark:text-zinc-800">
                             <span class="pointer-events-none absolute -left-1.5 size-4 rotate-45 bg-zinc-900 dark:bg-zinc-200"></span>
                             <p class="relative">{{ __('cachet::component.last_updated', ['timestamp' => $component->updated_at]) }}</p>
                         </div>

resources/views/components/header.blade.php

@@ -13,7 +13,7 @@
 
     @if ($dashboardLoginLink)
     <div class="flex items-center gap-2.5 sm:gap-5">
-        <a href="{{ Cachet\Cachet::dashboardPath() }}" class="rounded bg-accent px-3 py-2 text-sm font-semibold text-accent-foreground">
+        <a href="{{ Cachet\Cachet::dashboardPath() }}" class="rounded-sm bg-accent px-3 py-2 text-sm font-semibold text-accent-foreground">
             {{ __('filament-panels::pages/dashboard.title') }}
         </a>
         @auth

resources/views/setup/index.blade.php

@@ -51,7 +51,7 @@
                     </div>
                     <div class="lg:col-span-3">
                         <label for="show-support" class="flex items-start gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
-                            <input id="show-support" type="checkbox" class="block h-5 w-5 rounded border border-zinc-400 text-primary-500 dark:border-zinc-600 dark:bg-white/5" />
+                            <input id="show-support" type="checkbox" class="block h-5 w-5 rounded-sm border border-zinc-400 text-primary-500 dark:border-zinc-600 dark:bg-white/5" />
                             <span>Show support for Cachet</span>
                         </label>
                     </div>

vite.config.js

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vite'
 import laravel from 'laravel-vite-plugin'
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   build: {
     cssMinify: 'lightningcss'
   },
   plugins: [
+    tailwindcss(),
     laravel({
       input: [
         'resources/css/cachet.css',