Upgrade to Tailwind CSS v4.0 (#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 <contact@julius-kiekbusch.de> * wip --------- Co-authored-by: Julius Kiekbusch <contact@julius-kiekbusch.de>
2025-02-20 11:53:14 +08:00 · 2025-02-01 00:34:00 +07:00 · 2025-02-01 00:34:00 +07:00 · c6dcaf788c
commit c6dcaf788c
parent 60269b2705
6 changed files with 30 additions and 46 deletions
--- a/package.json
+++ b/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"
    }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +0,0 @@
-export default {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-};
--- a/resources/css/app.css
+++ b/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: Figtree, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+}
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,20 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: [
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './storage/framework/views/*.php',
-        './resources/**/*.blade.php',
-        './resources/**/*.js',
-        './resources/**/*.vue',
-    ],
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
-            },
-        },
-    },
-    plugins: [],
-};
--- a/vite.config.js
+++ b/vite.config.js
@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
+import tailwindcss from '@tailwindcss/vite';

 export default defineConfig({
    plugins: [
@ -7,5 +8,6 @@ export default defineConfig({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
+        tailwindcss(),
    ],
 });