easy

Author: 0-don

package.json

@@ -13,26 +13,27 @@
   },
   "dependencies": {
     "@elysiajs/eden": "1.2.0",
-    "@prisma/client": "6.2.1",
-    "@tanstack/react-query": "5.64.2",
+    "@prisma/client": "6.3.0",
+    "@tanstack/react-query": "5.65.1",
     "elysia": "1.2.10",
     "jose": "5.9.6",
     "next": "15.1.6",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },
   "devDependencies": {
-    "@types/bun": "1.2.0",
-    "@types/node": "22.10.10",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/bun": "1.2.1",
+    "@types/node": "22.12.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "eslint": "9.17.0",
     "eslint-config-next": "15.1.6",
     "postcss": "8.5.1",
     "prettier": "3.4.2",
-    "prettier-plugin-tailwindcss": "0.6.11",
-    "prisma": "6.2.1",
-    "tailwindcss": "3.4.17",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prisma": "6.3.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.7.3"
   }
 }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/globals.css

@@ -1,6 +1,22 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/*
+  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);
+  }
+}
 
 body {
   background-color: black;