upgrade tailwind

Author: codenickycode

client/package.json

@@ -24,17 +24,17 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.5",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "@vitejs/plugin-react-swc": "^3.9.0",
-    "autoprefixer": "^10.4.19",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^26.1.0",
     "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^4.1.5",
     "vite": "^6.3.5",
     "vitest": "^3.1.3"
   }

client/postcss.config.js

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

client/src/components/ui.modal.tsx

@@ -52,16 +52,18 @@ export const Modal = ({
   return (
     <div
       className={classNames(
-        'fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center z-50',
-        isOpen ? 'animate-fadeIn' : 'animate-fadeOut',
+        'fixed inset-0 bg-black/70 flex justify-center items-center',
+        isOpen ? 'animate-(--animate-fade-in)' : 'animate-(--animate-fade-out)',
       )}
       onClick={onClose}
       onAnimationEnd={handleAnimationEnd}
     >
       <div
         className={classNames(
-          'rounded-lg p-6 m-4',
-          isOpen ? 'animate-scaleIn' : 'animate-scaleOut',
+          'relative rounded-lg p-6 m-4',
+          isOpen
+            ? 'animate-(--animate-scale-in)'
+            : 'animate-(--animate-scale-out)',
           className ?? '',
         )}
         onClick={(e) => e.stopPropagation()}

client/src/index.css

@@ -1,6 +1,68 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --animate-fade-in: fadeIn 0.3s ease-out forwards;
+  --animate-fade-out: fadeOut 0.3s ease-out forwards;
+  --animate-scale-in: scaleIn 0.3s ease-out forwards;
+  --animate-scale-out: scaleOut 0.3s ease-out forwards;
+
+  --font-sans: Ubuntu, sans-serif;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes scaleOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+  }
+}
+
+/*
+  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 {