From c6dcaf788c63387f6086cae6cba974f2b89e43a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ng=C3=B4=20Qu=E1=BB=91c=20=C4=90=E1=BA=A1t?= Date: Sat, 1 Feb 2025 00:34:00 +0700 Subject: [PATCH] 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 * wip --------- Co-authored-by: Julius Kiekbusch --- package.json | 5 ++--- postcss.config.js | 6 ------ resources/css/app.css | 15 ++++++++++++--- resources/views/welcome.blade.php | 28 ++++++++++++++-------------- tailwind.config.js | 20 -------------------- vite.config.js | 2 ++ 6 files changed, 30 insertions(+), 46 deletions(-) delete mode 100644 postcss.config.js delete mode 100644 tailwind.config.js diff --git a/package.json b/package.json index e32a8628..a047e268 100644 --- 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" } } diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 49c0612d..00000000 --- a/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/resources/css/app.css b/resources/css/app.css index b5c61c95..8bccc025 100644 --- 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'; +} diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index b9d609c6..d12a07d0 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -15,7 +15,7 @@ @vite(['resources/css/app.css', 'resources/js/app.js']) @else @endif @@ -33,14 +33,14 @@ @auth Dashboard @else Log in @@ -48,7 +48,7 @@ @if (Route::has('register')) Register @@ -63,7 +63,7 @@
Laravel documentation screenshot
@@ -108,7 +108,7 @@
@@ -127,7 +127,7 @@
@@ -144,7 +144,7 @@ -
+
@@ -159,7 +159,7 @@

Vibrant Ecosystem

- Laravel's robust library of first-party tools and libraries, such as Forge, Vapor, Nova, Envoyer, and Herd help you take your projects to the next level. Pair them with powerful open source libraries like Cashier, Dusk, Echo, Horizon, Sanctum, Telescope, and more. + Laravel's robust library of first-party tools and libraries, such as Forge, Vapor, Nova, Envoyer, and Herd help you take your projects to the next level. Pair them with powerful open source libraries like Cashier, Dusk, Echo, Horizon, Sanctum, Telescope, and more.

diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index ce0c57fc..00000000 --- a/tailwind.config.js +++ /dev/null @@ -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: [], -}; diff --git a/vite.config.js b/vite.config.js index 421b5695..29fbfe9a 100644 --- 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(), ], });