⚡ 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) => {