Upgrade to Tailwind CSS v4.0 (laravel#6523)

* Upgrade to Tailwind CSS v4.0

* Upgrade to Tailwind CSS 4

* Upgrade to Tailwind CSS 4

* Upgrade to Tailwind CSS 4

* Upgrade to Tailwind CSS 4

* Upgrade to Tailwind CSS v4.0

* remove compatible styles

Co-authored-by: Julius Kiekbusch <[email protected]>

* wip

---------

Co-authored-by: Julius Kiekbusch <[email protected]>

Author: datlechin

package.json

@@ -6,12 +6,11 @@
         "dev": "vite"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.20",
+        "@tailwindcss/vite": "^4.0.0",
         "axios": "^1.7.4",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^1.2.0",
-        "postcss": "^8.4.47",
-        "tailwindcss": "^3.4.13",
+        "tailwindcss": "^4.0.0",
         "vite": "^6.0.11"
     }
 }

postcss.config.js

@@ -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: Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+}

resources/css/app.css

@@ -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(),
     ],
 });