⚡ Upgrade tailwind version to 4 (#170)

* ⚡️ Upgrade Tailwind version to 4

* 🔥 Add GSAP and update theme toggle animations

* ✨ Add cursor pointer style for buttons in base layer

Author: HassanZahirnia

package-lock.json

@@ -12,18 +12,19 @@
         "@docsearch/js": "^3.9.0",
         "@fontsource/poppins": "^5.2.6",
         "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/postcss": "^4.1.8",
         "@tailwindcss/typography": "^0.5.16",
         "alpinejs": "^3.14.9",
-        "autoprefixer": "^10.4.21",
         "axios": "^1.9.0",
+        "gsap": "^3.13.0",
         "laravel-vite-plugin": "^0.7.8",
-        "motion": "^12.10.4",
+        "motion": "^12.16.0",
         "number-flow": "^0.5.7",
-        "postcss": "^8.5.3",
+        "postcss": "^8.5.4",
         "prettier": "^3.5.3",
         "prettier-plugin-blade": "^2.1.21",
-        "prettier-plugin-tailwindcss": "^0.6.11",
-        "tailwindcss": "^3.4.17",
+        "prettier-plugin-tailwindcss": "^0.6.12",
+        "tailwindcss": "^4.1.8",
         "vite": "^4.5.14"
     }
 }

package.json

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

postcss.config.js

@@ -1,6 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms';
+
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+@source '../../storage/framework/views/*.php';
+@source '../../vendor/filament/**/*.blade.php';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+    --color-mirage: #141624;
+    --color-haiti: #16182c;
+    --color-cloud: #2b2e53;
+
+    --font-poppins: 'Poppins', Verdana, sans-serif;
+}
+
+@utility container {
+    margin-inline: auto;
+}
+
+@layer base {
+    button:not(:disabled),
+    [role='button']:not(:disabled) {
+        cursor: pointer;
+    }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentcolor);
+    }
+}
 
 @layer base {
     html {

public/js/filament/forms/components/markdown-editor.js

@@ -1,3 +1,5 @@
+@reference "./app.css"
+
 :root {
     --docsearch-container-background: rgba(0, 0, 0, 0.5);
     --docsearch-primary-color: #987af1;
@@ -34,11 +36,11 @@
 }
 
 .DocSearch-Button-Placeholder {
-    @apply hidden pl-1 pr-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
+    @apply hidden pr-1 pl-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
 }
 
 .DocSearch-Button-Keys {
-    @apply ml-1 mt-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
+    @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
 }
 
 .DocSearch-Button-Key {

public/js/filament/forms/components/rich-editor.js

@@ -1,6 +1,7 @@
 import './fonts'
 import './bootstrap'
 import 'number-flow'
+import { gsap } from 'gsap'
 import {
     Livewire,
     Alpine,
@@ -49,6 +50,9 @@ window.motion = {
     cubicBezier: cubicBezier,
 }
 
+// GSAP
+window.gsap = gsap
+
 // Alpine
 Alpine.data('codeBlock', codeBlock)
 Alpine.magic('refAll', (el) => {

public/js/filament/forms/components/select.js

@@ -6,19 +6,19 @@ class="relative z-0 mt-5 flex flex-col items-start gap-3 overflow-hidden rounded
 >
     {{-- Blue circle --}}
     <div
-        class="absolute left-6 top-0 -z-10 hidden h-32 w-6 -rotate-[60deg] rounded-full blur-lg min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block dark:bg-gradient-to-b dark:from-blue-500 dark:to-blue-500/10"
+        class="absolute left-6 top-0 -z-10 hidden h-32 w-6 -rotate-60 rounded-full blur-lg min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block dark:bg-linear-to-b dark:from-blue-500 dark:to-blue-500/10"
         aria-hidden="true"
     ></div>
 
     {{-- White circle --}}
     <div
-        class="absolute left-20 top-0 -z-20 hidden h-32 w-3 -rotate-[60deg] rounded-full blur-lg min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block dark:bg-gradient-to-b dark:from-white/30 dark:to-transparent"
+        class="absolute left-20 top-0 -z-20 hidden h-32 w-3 -rotate-60 rounded-full blur-lg min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block dark:bg-linear-to-b dark:from-white/30 dark:to-transparent"
         aria-hidden="true"
     ></div>
 
     {{-- Icon --}}
     <div
-        class="grid size-10 place-items-center rounded-full bg-gray-200/50 backdrop-blur-sm dark:bg-black/30"
+        class="grid size-10 place-items-center rounded-full bg-gray-200/50 backdrop-blur-xs dark:bg-black/30"
         aria-hidden="true"
     >
         <x-icons.colored-confetti

public/js/filament/support/support.js

@@ -10,7 +10,7 @@
     <div
         x-data="{ open: false }"
         x-on:click="open = !open"
-        class="group/faq-card grid cursor-pointer select-none grid-cols-[1.8rem,1fr,2.5rem] gap-x-3 rounded-2xl px-5 py-5 ring-1 transition-all duration-200"
+        class="group/faq-card grid cursor-pointer select-none grid-cols-[1.8rem_1fr_2.5rem] gap-x-3 rounded-2xl px-5 py-5 ring-1 transition-all duration-200"
         :class="{ 'ring-gray-200 hover:bg-gray-100 dark:ring-white/20 dark:hover:bg-gray-900/50': !open, 'ring-black/10 bg-gray-100 dark:ring-white/20 dark:bg-gray-900/50': open }"
     >
         {{-- Number --}}

resources/css/app.css

@@ -1,5 +1,5 @@
 <footer
-    class="mx-auto max-w-5xl px-5 pb-5 pt-20 xl:max-w-7xl 2xl:max-w-[90rem]"
+    class="mx-auto max-w-5xl px-5 pb-5 pt-20 xl:max-w-7xl 2xl:max-w-360"
     aria-labelledby="footer-heading"
 >
     <h2

resources/css/docsearch.css

@@ -1,7 +1,7 @@
 <x-layout :hasMenu="! empty($sidebarLeft)">
     {{-- Main container --}}
     <main
-        class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl:max-w-[90rem]"
+        class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl:max-w-360"
     >
         {{-- Left sidebar --}}
         @if (! empty($sidebarLeft))

resources/js/app.js

@@ -9,7 +9,7 @@ class="sticky top-0 z-50 flex flex-col items-center justify-center px-3 pt-px"
             'ring-gray-200/80 dark:ring-gray-800/50 bg-white/50 dark:bg-white/5 translate-y-3': scrolled || showDocsNavigation,
             'ring-transparent dark:bg-transparent': ! scrolled && ! showDocsNavigation,
         }"
-        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-md transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-[90rem]"
+        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-md transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-360"
     >
         {{-- Left side --}}
         <div class="flex items-center gap-3">
@@ -31,11 +31,11 @@ class="group relative z-0 hidden items-center overflow-hidden rounded-full bg-gr
                 title="Read the NativePHP v1 announcement"
             >
                 <div
-                    class="absolute inset-0 flex items-center [container-type:inline-size]"
+                    class="@container absolute inset-0 flex items-center"
                     aria-hidden="true"
                 >
                     <div
-                        class="absolute h-[100cqw] w-[100cqw] bg-[conic-gradient(from_0_at_50%_50%,rgba(167,139,250,0.75)_0deg,transparent_60deg,transparent_300deg,rgba(167,139,250,0.75)_360deg)] transition duration-300 [animation:spin_2.5s_linear_infinite]"
+                        class="absolute h-[100cqw] w-[100cqw] animate-[spin_2.5s_linear_infinite] bg-[conic-gradient(from_0_at_50%_50%,rgba(167,139,250,0.75)_0deg,transparent_60deg,transparent_300deg,rgba(167,139,250,0.75)_360deg)] transition duration-300"
                     ></div>
                 </div>
 
@@ -107,7 +107,7 @@ class="flex items-center gap-3.5 text-sm"
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
@@ -126,15 +126,15 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
                 @if ($hasMenu)
                     <button
                         type="button"
                         @click="showDocsNavigation = !showDocsNavigation"
-                        class="-m-2 block p-2 text-gray-600 focus:outline-none focus:ring-0 lg:hidden dark:text-gray-300"
+                        class="-m-2 block p-2 text-gray-600 focus:ring-0 focus:outline-hidden lg:hidden dark:text-gray-300"
                         aria-expanded="false"
                         aria-controls="docs-navigation"
                         aria-label="Toggle documentation menu"
@@ -179,7 +179,7 @@ class="size-6"
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
@@ -196,10 +196,10 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
                     >
                     Blog
                     </a>
-
+                    
                     {{-- Decorative circle -- }}
                     <div
-                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    class="hidden size-[3px] rotate-45 rounded-xs bg-gray-400 transition duration-200 lg:block dark:opacity-60"
                     aria-hidden="true"
                     ></div>
                 --}}
@@ -272,7 +272,7 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
                         }
                     "
                     href="/docs/1/getting-started/sponsoring"
-                    class="relative hidden bg-gradient-to-tr from-violet-600 to-violet-300 bg-clip-text font-medium text-transparent lg:block dark:from-violet-500 dark:to-white/80"
+                    class="relative hidden bg-linear-to-tr from-violet-600 to-violet-300 bg-clip-text font-medium text-transparent lg:block dark:from-violet-500 dark:to-white/80"
                     aria-label="Sponsor NativePHP"
                     title="Support NativePHP development"
                 >
@@ -282,7 +282,7 @@ class="relative hidden bg-gradient-to-tr from-violet-600 to-violet-300 bg-clip-t
                     {{-- Heart 1 --}}
                     <div
                         x-ref="sponsorHeart1"
-                        class="absolute right-1/2 top-0 origin-center scale-0 opacity-0"
+                        class="absolute top-0 right-1/2 origin-center scale-0 opacity-0"
                         aria-hidden="true"
                     >
                         <x-icons.heart class="size-[9px] text-violet-400" />
@@ -291,7 +291,7 @@ class="absolute right-1/2 top-0 origin-center scale-0 opacity-0"
                     {{-- Heart 2 --}}
                     <div
                         x-ref="sponsorHeart2"
-                        class="absolute left-1/2 top-0 origin-center scale-0 opacity-0"
+                        class="absolute top-0 left-1/2 origin-center scale-0 opacity-0"
                         aria-hidden="true"
                     >
                         <x-icons.heart class="size-[7px] text-violet-400" />
@@ -300,7 +300,7 @@ class="absolute left-1/2 top-0 origin-center scale-0 opacity-0"
                     {{-- Heart 3 --}}
                     <div
                         x-ref="sponsorHeart3"
-                        class="absolute right-1/2 top-0 origin-center scale-0 opacity-0"
+                        class="absolute top-0 right-1/2 origin-center scale-0 opacity-0"
                         aria-hidden="true"
                     >
                         <x-icons.heart class="size-[5px] text-violet-400" />
@@ -350,7 +350,7 @@ class="absolute -bottom-1 left-0 h-0.5 w-2 origin-left rounded-full bg-violet-40
                                 )
                             }
                         "
-                        class="absolute -bottom-1.5 left-0 h-8 w-2 origin-left rounded-full bg-gradient-to-t from-violet-500 to-transparent blur-[9px] will-change-transform dark:blur-sm"
+                        class="absolute -bottom-1.5 left-0 h-8 w-2 origin-left rounded-full bg-linear-to-t from-violet-500 to-transparent blur-[9px] will-change-transform dark:blur-xs"
                         aria-hidden="true"
                     ></div>
                 </a>

resources/views/components/alert-v1-announcement.blade.php

@@ -1,5 +1,5 @@
 <aside
-    class="sticky top-20 hidden max-h-[clamp(15rem,100svh,88svh)] w-[17rem] shrink-0 flex-col overflow-y-auto overflow-x-hidden px-3 py-4 xl:flex"
+    class="sticky top-20 hidden max-h-[clamp(15rem,100svh,88svh)] w-68 shrink-0 flex-col overflow-y-auto overflow-x-hidden px-3 py-4 xl:flex"
 >
     {{ $slot }}
 </aside>