Fix: Update packages for Tailwind CSS 4, clean up package list by removing @tailwindcss/vite and sass, and set PostCSS as default. Added @tailwindcss/nesting for better nesting support and fixed PostCSS config.

Author: omimouni

src/TallPreset.php

@@ -9,13 +9,11 @@
 class TallPreset extends Preset
 {
     const NPM_PACKAGES_TO_ADD = [
+        'tailwindcss' => '^4.0',
         '@tailwindcss/forms' => '^0.5',
         '@tailwindcss/typography' => '^0.5',
-        'autoprefixer' => '^10.4',
-        'resolve-url-loader' => '^3.1',
-        'sass' => '^1.3',
-        'sass-loader' => '^8.0',
-        'tailwindcss' => '^3.4',
+        '@tailwindcss/postcss' => '^4.0',
+        '@tailwindcss/nesting' => 'latest',
     ];
 
     const NPM_PACKAGES_TO_REMOVE = [

stubs/default/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        "@tailwindcss/postcss": {},
+        '@tailwindcss/nesting': {},
     },
 }

stubs/default/resources/css/app.css

@@ -0,0 +1,22 @@
+/* Import Tailwind CSS framework */
+@import 'tailwindcss';
+
+/* Custom theme configuration with system font stack */
+@theme {
+    --font-sans: 'Inter var', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+/* Include Tailwind CSS plugins for enhanced form styling and typography */
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+/* Remove default red box-shadow on invalid form elements */
+input:invalid, textarea:invalid, select:invalid {
+    box-shadow: none;
+}
+
+/* Hide elements with x-cloak attribute (used with Alpine.js) until JavaScript loads */
+[x-cloak] {
+    display: none;
+}

stubs/default/resources/sass/app.scss

@@ -16,7 +16,7 @@
         <!-- Fonts -->
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 
-        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
         @livewireStyles
         @livewireScripts
 

stubs/default/resources/views/layouts/base.blade.php

@@ -4,7 +4,7 @@ import laravel from 'laravel-vite-plugin'
 export default defineConfig({
     plugins: [
         laravel({
-            input: ['resources/sass/app.scss', 'resources/js/app.js'],
+            input: ['resources/css/app.css', 'resources/js/app.js'],
             refresh: true,
         }),
     ],