⚡️ Upgrade Tailwind version to 4

Author: HassanZahirnia

package-lock.json

@@ -12,18 +12,18 @@
         "@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",
         "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,43 @@
-@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;
+}
+
+/*
+  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

@@ -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