update to tailwind v4

package.json

@@ -6,11 +6,11 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.16",
+        "@tailwindcss/vite": "^4.0.0",
         "axios": "^1.6.1",
-        "laravel-vite-plugin": "^1.0.0",
-        "postcss": "^8.4.32",
-        "tailwindcss": "^3.4.0",
-        "vite": "^5.0"
+        "concurrently": "^9.0.1",
+        "laravel-vite-plugin": "^1.2.0",
+        "tailwindcss": "^4.0.9",
+        "vite": "^6.0.11"
     }
 }

resources/css/app.css

@@ -1,3 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+@source '../../storage/framework/views/*.php';
+@source "../**/*.blade.php";
+@source "../**/*.js";
+@source "../**/*.vue";
+
+@theme {
+    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';
+}

resources/views/components/button.blade.php

@@ -5,35 +5,35 @@
 
 @php
 $class = implode(' ', [
-    'inline-flex h-9 px-3 items-center justify-center rounded-lg text-sm/6 font-medium bg-[--button-background-color] border border-[--button-border-color]',
+    'inline-flex h-9 px-3 items-center justify-center rounded-lg text-sm/6 font-medium bg-(--button-background-color) border border-(--button-border-color)',
     // focus
-    'focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
+    'focus:outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
 ]);
 $colorClass = [
     'blue' => implode(' ', [
-        'text-white [--button-background-color:theme(colors.blue.600)] [--button-border-color:theme(colors.blue.700/80%)]',
+        'text-white [--button-background-color:var(--color-blue-600)] [--button-border-color:var(--color-blue-700)]/80',
         // hover
-        'hover:[--button-background-color:theme(colors.blue.600/90%)]'
+        'hover:[--button-background-color:var(--color-blue-600)]/90'
     ]),
     'green' => implode(' ', [
-        'text-white [--button-background-color:theme(colors.green.600)] [--button-border-color:theme(colors.green.700/80%)]',
+        'text-white [--button-background-color:var(--color-green-600)] [--button-border-color:var(--color-green-700)]/80',
         // hover
-        'hover:[--button-background-color:theme(colors.green.600/90%)]'
+        'hover:[--button-background-color:var(--color-green-600)]/90'
     ]),
     'red' => implode(' ', [
-        'text-white [--button-background-color:theme(colors.red.600)] [--button-border-color:theme(colors.red.700/80%)]',
+        'text-white [--button-background-color:var(--color-red-600)] [--button-border-color:var(--color-red-700)]/80',
         // hover
-        'hover:[--button-background-color:theme(colors.red.600/90%)]'
+        'hover:[--button-background-color:var(--color-red-600)]/90'
     ]),
     'yellow' => implode(' ', [
-        'text-yellow-950 [--button-background-color:theme(colors.yellow.300)] [--button-border-color:theme(colors.yellow.400/80%)]',
+        'text-yellow-950 [--button-background-color:var(--color-yellow-300)] [--button-border-color:var(--color-yellow-400)]/80',
         // hover
-        'hover:[--button-background-color:theme(colors.yellow.300/90%)]'
+        'hover:[--button-background-color:var(--color-yellow-300)]/90'
     ]),
     'zinc' => implode(' ', [
-        'text-white [--button-background-color:theme(colors.zinc.600)] [--button-border-color:theme(colors.zinc.700/80%)]',
+        'text-white [--button-background-color:var(--color-zinc-600)] [--button-border-color:var(--color-zinc-700)]/80',
         // hover
-        'hover:[--button-background-color:theme(colors.zinc.600/90%)]'
+        'hover:[--button-background-color:var(--color-zinc-600)]/90'
     ]),
 ][$color];
 @endphp

resources/views/components/image-field.blade.php

@@ -23,7 +23,7 @@ class="fill-zinc-500"
         </svg>
         @if ($value)
             <img
-                class="max-w-none rounded-md absolute size-[calc(100%+theme(spacing[0.5]))] object-center object-cover -top-px -start-px"
+                class="max-w-none rounded-md absolute size-[calc(100%+(--spacing(0.5)))] object-center object-cover -top-px -start-px"
                 src="{{ $value }}"
             />
         @endif
@@ -64,7 +64,7 @@ class="max-w-none rounded-md absolute size-[calc(100%+theme(spacing[0.5]))] obje
 
             const imageEl = document.createElement('img')
 
-            imageEl.className = 'max-w-none rounded-md absolute size-[calc(100%+theme(spacing[0.5]))] object-center object-cover -top-px -start-px'
+            imageEl.className = 'max-w-none rounded-md absolute size-[calc(100%+(--spacing(0.5)))] object-center object-cover -top-px -start-px'
             imageEl.dataset.preview = ''
             imageEl.src = previewObjectURL
 

resources/views/posts/_form.blade.php

@@ -120,7 +120,7 @@ class="ml-2">{{ $featuredStatus->booleanLabel() }}</label>
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            document.querySelector('#title').addEventListener('blur', function() {
+            document.querySelector('#title').addEventListener('blur-sm', function() {
                 document.querySelector('#slug').value = slugify(this.value);
             });
 

resources/views/posts/create.blade.php

@@ -3,7 +3,7 @@
 @section('content')
 
     <div class="flex justify-center">
-        <div class="lg:w-2/3 bg-white p-6 rounded-lg bg-white shadow sm:rounded-lg p-6">
+        <div class="lg:w-2/3 bg-white p-6 rounded-lg bg-white shadow-sm sm:rounded-lg p-6">
             <h1 class="text-2xl font-bold mb-2">{{ __('posts.form.Create Post') }}</h1>
             <form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
                 @csrf

resources/views/posts/edit.blade.php

@@ -3,7 +3,7 @@
 @section('content')
 
     <div class="flex justify-center">
-        <div class="lg:w-2/3 bg-white p-6 rounded-lg bg-white shadow sm:rounded-lg p-6">
+        <div class="lg:w-2/3 bg-white p-6 rounded-lg bg-white shadow-sm sm:rounded-lg p-6">
             <h1 class="text-2xl font-bold mb-2">{{ __('posts.form.Edit Post') }}</h1>
             <form action="{{ route('posts.update', [$post]) }}" method="POST" enctype="multipart/form-data">
                 @csrf

resources/views/posts/index.blade.php

@@ -26,7 +26,7 @@
                         <x-button onclick="this.nextElementSibling.classList.toggle('hidden')">
                             <span>{{ __('posts.index.Languages') }} &#x25BE;</span>
                         </x-button>
-                        <div class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg hidden bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+                        <div class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg hidden bg-white ring-1 ring-black ring-opacity-5 focus:outline-hidden"
                             role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                             @foreach (Settings::getLocales() as $locale => $Label)
                                 <a @class([

resources/views/posts/show.blade.php

@@ -6,9 +6,9 @@
         <x-button class="self-end" :href="route('posts.index')">
             {{ __('posts.show.View All') }}
         </x-button>
-        <div class="bg-gray-50 mt-4 shadow overflow-hidden rounded-lg">
+        <div class="bg-gray-50 mt-4 shadow-sm overflow-hidden rounded-lg">
             <img src="{{ $post->image }}" class="w-full" alt="{{ $post->title }}" height="400" />
-            <div class="px-3 py-4 bg-white shadow-sm rounded m-1">
+            <div class="px-3 py-4 bg-white shadow-xs rounded-sm m-1">
                 <div class="flex gap-x-4">
                     <div class="flex-1">
                         <h1 class="text-2xl font-bold mb-2">

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({
     plugins: [
         laravel({
             input: ['resources/css/app.css', 'resources/js/app.js'],
             refresh: true,
         }),
+        tailwindcss(),
     ],
 });