fix: update packages for tailwindcss 4 and fix postcss config

Author: omimouni

src/TallPreset.php

@@ -15,7 +15,9 @@ class TallPreset extends Preset
         'resolve-url-loader' => '^3.1',
         'sass' => '^1.3',
         'sass-loader' => '^8.0',
-        'tailwindcss' => '^3.4',
+        'tailwindcss' => '^4.0',
+        '@tailwindcss/postcss' => '^4.0',
+        '@tailwindcss/vite' => '^4.0',
     ];
 
     const NPM_PACKAGES_TO_REMOVE = [

stubs/default/postcss.config.js

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

stubs/default/resources/sass/app.scss

@@ -1,54 +1,10 @@
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- *
- * You can see the styles here:
- * https://unpkg.com/tailwindcss/dist/base.css
- */
-@tailwind base;
+@import "./tailwind.css";
+
 
-/**
- * Remove the default box-shadow for invalid elements to prevent
- * inputs in Livewire components showing with a
- * red border by default in Firefox.
- *
- * See: https://github.com/laravel-frontend-presets/tall/issues/7
- */
  input:invalid, textarea:invalid, select:invalid {
     box-shadow: none;
 }
 
-/**
- * This injects any component classes registered by plugins.
- */
-@tailwind components;
-
-/**
- * Here you would add any of your custom component classes; stuff that you'd
- * want loaded *before* the utilities so that the utilities could still
- * override them.
- *
- * Example:
- *
- * .btn { ... }
- * .form-input { ... }
- */
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- */
-@tailwind utilities;
-
-/**
- * Here you would add any custom utilities you need that don't come out of the
- * box with Tailwind.
- *
- * Example :
- *
- * .bg-pattern-graph-paper { ... }
- * .skew-45 { ... }
- */
 
 [x-cloak] {
     display: none;

stubs/default/resources/sass/tailwind.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+@theme {
+    --font-sans: 'Inter var', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+@plugin '@tailwindcss/forms'
+@plugin '@tailwindcss/typography'

stubs/default/tailwind.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/sass/app.scss', 'resources/js/app.js'],
             refresh: true,
         }),
+        tailwindcss(),
     ],
 })