feat: add support tailwindcss version 4, tweak scaffolding, tweak styles

kresnasatya · kresnasatya · commit 9fff24616771 · 2025-07-26T13:45:26.000+08:00
The breeze-lite support laravel version 12 because it follows the upstream (laravel/breeze): laravel/breeze#451
diff --git a/docs/creating-chirps.md b/docs/creating-chirps.md
@@ -187,7 +187,7 @@ We can then create our front-end `Chirps/Index` page component with a form for c
 <AuthenticatedLayout>
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
         <form onsubmit={submit}>
-            <textarea required bind:value={$form.message} class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
+            <textarea required bind:value={$form.message} class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-indigo/50 rounded-md shadow-sm"
             placeholder="What's on your mind?"></textarea>
             <InputError class="mt-2" message={$form.errors.message} />
             <PrimaryButton class="mt-4">Chirp</PrimaryButton>
diff --git a/docs/deleting-chirps.md b/docs/deleting-chirps.md
@@ -157,7 +157,7 @@ Finally, we can add a delete button to the dropdown menu we created earlier in o
         </div>
         {#if editing}
             <form onsubmit={submit}>
-                <textarea bind:value={$form.message} class="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea>
+                <textarea bind:value={$form.message} class="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-indigo/50 rounded-md shadow-sm"></textarea>
                 <InputError message={$form.errors.message} class="mt-2" />
                 <div class="space-x-2">
                     <PrimaryButton class="mt-4">Save</PrimaryButton>
diff --git a/docs/editing-chirps.md b/docs/editing-chirps.md
@@ -100,7 +100,7 @@ We're going to use the `Dropdown` component that comes with Breeze, which we'll
         </div>
         {#if editing} // [!code ++]
             <form onsubmit={submit}> // [!code ++]
-                <textarea bind:value={$form.message} class="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"></textarea> // [!code ++]
+                <textarea bind:value={$form.message} class="mt-4 w-full text-gray-900 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-indigo/50 rounded-md shadow-sm"></textarea> // [!code ++]
                 <InputError message={$form.errors.message} class="mt-2" /> // [!code ++]
                 <div class="space-x-2"> // [!code ++]
                     <PrimaryButton class="mt-4">Save</PrimaryButton> // [!code ++]
diff --git a/docs/showing-chirps.md b/docs/showing-chirps.md
@@ -123,7 +123,7 @@ Finally, we will update our `Chirps/Index` page component to accept the `chirps`
 <AuthenticatedLayout>
     <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
         <form onsubmit={submit}>
-            <textarea required bind:value={$form.message} class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
+            <textarea required bind:value={$form.message} class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-indigo/50 rounded-md shadow-sm"
             placeholder="What's on your mind?"></textarea>
             <InputError class="mt-2" message={$form.errors.message} />
             <PrimaryButton class="mt-4">Chirp</PrimaryButton>
diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
@@ -27,10 +27,9 @@ protected function installInertiaSvelteStack()
             return [
                 '@inertiajs/svelte' => '^2.0.0',
                 '@tailwindcss/forms' => '^0.5.7',
-                '@sveltejs/vite-plugin-svelte' => '^5.0.0',
-                'autoprefixer' => '^10.4.20',
-                'postcss' => '^8.4.33',
-                'tailwindcss' => '^3.4.10',
+                '@tailwindcss/vite' => '^4.0.0',
+                '@sveltejs/vite-plugin-svelte' => '^6.0.0',
+                'tailwindcss' => '^4.0.0',
                 'svelte' => '^5.0',
                 'svelte-check' => '^4.0.0',
             ] + $packages;
@@ -158,10 +157,9 @@ protected function installInertiaSvelteStack()
         copy(base_path('vendor/laravel/breeze/stubs/inertia-common/routes/auth.php'), base_path('routes/auth.php'));
 
         // Tailwind / Vite...
-        copy(base_path('vendor/laravel/breeze/stubs/default/resources/css/app.css'), resource_path('css/app.css'));
-        copy(base_path('vendor/laravel/breeze/stubs/default/postcss.config.js'), base_path('postcss.config.js'));
-        copy(base_path('vendor/laravel/breeze/stubs/inertia-common/tailwind.config.js'), base_path('tailwind.config.js'));
         copy(__DIR__.'/../../stubs/inertia-svelte/vite.config.js', base_path('vite.config.js'));
+        copy(__DIR__.'/../../stubs/default/resources/css/app.css', resource_path('css/app.css'));
+        $this->replaceInFile('.js', '.svelte', resource_path('css/app.css'));
 
         if ($this->option('typescript')) {
             copy(__DIR__.'/../../stubs/inertia-svelte-ts/tsconfig.json', base_path('tsconfig.json'));
@@ -177,13 +175,10 @@ protected function installInertiaSvelteStack()
 
             $this->replaceInFile('.js', '.ts', base_path('vite.config.js'));
             $this->replaceInFile('.js', '.ts', resource_path('views/app.blade.php'));
-            $this->replaceInFile('.vue', '.svelte', base_path('tailwind.config.js'));
             $this->replaceInFile('"vite build', '"tsc && vite build', base_path('package.json'));
         } else {
             copy(__DIR__.'/../../stubs/inertia-svelte/jsconfig.json', base_path('jsconfig.json'));
             copy(__DIR__.'/../../stubs/inertia-svelte/resources/js/app.js', resource_path('js/app.js'));
-
-            $this->replaceInFile('.vue', '.svelte', base_path('tailwind.config.js'));
         }
 
         if ($this->option('ssr')) {
diff --git a/stubs/default/resources/css/app.css b/stubs/default/resources/css/app.css
@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+@source '../../storage/framework/views/*.php';
+@source '../**/*.blade.php';
+@source '../**/*.js';
+
+@theme {
+    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+@plugin '@tailwindcss/forms';
diff --git a/stubs/inertia-svelte-ts/resources/js/Components/Dropdown.svelte b/stubs/inertia-svelte-ts/resources/js/Components/Dropdown.svelte
@@ -87,7 +87,7 @@
                 class="absolute z-50 mt-2 rounded-md shadow-lg {widthClass} {alignmentClasses}"
                 onclick={() => (open = false)}
             >
-                <div class="rounded-md ring-1 ring-black ring-opacity-5 {contentClasses}">
+                <div class="rounded-md ring ring-black ring-black/20 {contentClasses}">
                     {@render content()}
                 </div>
             </div>
diff --git a/stubs/inertia-svelte-ts/resources/js/Pages/Welcome.svelte b/stubs/inertia-svelte-ts/resources/js/Pages/Welcome.svelte
@@ -54,15 +54,15 @@
                             <a
                                 use:inertia
                                 href={route('dashboard')}
-                                class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                                class="rounded-md px-3 py-2 text-black ring ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                             >
                                 Dashboard
                             </a>
                         {:else}
                             <a
                                 use:inertia
                                 href={route('login')}
-                                class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                                class="rounded-md px-3 py-2 text-black ring ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                             >
                                 Log in
                             </a>
@@ -71,7 +71,7 @@
                                 <a
                                     use:inertia
                                     href={route('register')}
-                                    class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
+                                    class="rounded-md px-3 py-2 text-black ring ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                                 >
                                     Register
                                 </a>
@@ -86,7 +86,7 @@
                     <a
                         href="https://laravel.com/docs"
                         id="docs-card"
-                        class="flex flex-col items-start gap-6 overflow-hidden rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] md:row-span-3 lg:p-10 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
+                        class="flex flex-col items-start gap-6 overflow-hidden rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] md:row-span-3 lg:p-10 lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
                     >
                         <div
                             id="screenshot-container"
@@ -162,7 +162,7 @@
 
                     <a
                         href="https://laracasts.com"
-                        class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
+                        class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
                     >
                         <div
                             class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16"
@@ -210,7 +210,7 @@
 
                     <a
                         href="https://laravel-news.com"
-                        class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
+                        class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]"
                     >
                         <div
                             class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16"
@@ -263,7 +263,7 @@
                     </a>
 
                     <div
-                        class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
+                        class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring ring-white/[0.05] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
                     >
                         <div
                             class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16"
@@ -291,59 +291,59 @@
                                 Laravel's robust library of first-party tools and libraries, such as
                                 <a
                                     href="https://forge.laravel.com"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white dark:focus-visible:ring-[#FF2D20]"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white dark:focus-visible:ring-[#FF2D20]"
                                     >Forge</a
                                 >,
                                 <a
                                     href="https://vapor.laravel.com"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Vapor</a
                                 >,
                                 <a
                                     href="https://nova.laravel.com"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Nova</a
                                 >,
                                 <a
                                     href="https://envoyer.io"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Envoyer</a
                                 >, and
                                 <a
                                     href="https://herd.laravel.com"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Herd</a
                                 >
                                 help you take your projects to the next level. Pair them with powerful
                                 open source libraries like
                                 <a
                                     href="https://laravel.com/docs/billing"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Cashier</a
                                 >,
                                 <a
                                     href="https://laravel.com/docs/dusk"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Dusk</a
                                 >,
                                 <a
                                     href="https://laravel.com/docs/broadcasting"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Echo</a
                                 >,
                                 <a
                                     href="https://laravel.com/docs/horizon"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Horizon</a
                                 >,
                                 <a
                                     href="https://laravel.com/docs/sanctum"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Sanctum</a
                                 >,
                                 <a
                                     href="https://laravel.com/docs/telescope"
-                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring-1 focus-visible:ring-[#FF2D20] dark:hover:text-white"
+                                    class="rounded-sm underline hover:text-black focus:outline-none focus-visible:ring focus-visible:ring-[#FF2D20] dark:hover:text-white"
                                     >Telescope</a
                                 >, and more.
                             </p>
diff --git a/stubs/inertia-svelte/resources/js/Components/Dropdown.svelte b/stubs/inertia-svelte/resources/js/Components/Dropdown.svelte
@@ -67,7 +67,7 @@
                 class="absolute z-50 mt-2 rounded-md shadow-lg {widthClass} {alignmentClasses}"
                 onclick={() => (open = false)}
             >
-                <div class="rounded-md ring-1 ring-black ring-opacity-5 {contentClasses}">
+                <div class="rounded-md ring ring-black ring-black/20 {contentClasses}">
                     {@render content()}
                 </div>
             </div>
diff --git a/stubs/inertia-svelte/resources/js/Pages/Welcome.svelte b/stubs/inertia-svelte/resources/js/Pages/Welcome.svelte
diff --git a/stubs/inertia-svelte/vite.config.js b/stubs/inertia-svelte/vite.config.js

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@`
`87`	`87`	`class="absolute z-50 mt-2 rounded-md shadow-lg {widthClass} {alignmentClasses}"`
`88`	`88`	`onclick={() => (open = false)}`
`89`	`89`	`>`
`90`		`- <div class="rounded-md ring-1 ring-black ring-opacity-5 {contentClasses}">`
	`90`	`+ <div class="rounded-md ring ring-black ring-black/20 {contentClasses}">`
`91`	`91`	`{@render content()}`
`92`	`92`	`</div>`
`93`	`93`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@`
`67`	`67`	`class="absolute z-50 mt-2 rounded-md shadow-lg {widthClass} {alignmentClasses}"`
`68`	`68`	`onclick={() => (open = false)}`
`69`	`69`	`>`
`70`		`- <div class="rounded-md ring-1 ring-black ring-opacity-5 {contentClasses}">`
	`70`	`+ <div class="rounded-md ring ring-black ring-black/20 {contentClasses}">`
`71`	`71`	`{@render content()}`
`72`	`72`	`</div>`
`73`	`73`	`</div>`