⬆️ updgrade tailwindcss to v4

app/globals.css

@@ -1,3 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin './hero.ts';
+/* Note: You may need to change the path to fit your project structure */
+@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));

app/hero.ts

@@ -0,0 +1,5 @@
+// hero.ts
+import { heroui } from "@heroui/react";
+// or import from theme package if you are using individual packages.
+// import { heroui } from "@heroui/theme";
+export default heroui();

package.json

@@ -11,8 +11,9 @@
     "push": "bun ./scripts/git-multipush.ts"
   },
   "dependencies": {
-    "@heroui/react": "^2.7.11",
+    "@heroui/react": "^2.8.2",
     "@iconify/react": "^6.0.0",
+    "@tailwindcss/postcss": "^4.1.11",
     "commitizen": "^4.3.1",
     "cz-emoji": "^1.3.2-canary.2",
     "framer-motion": "^12.23.3",
@@ -21,6 +22,7 @@
     "nextjs-toploader": "^3.8.16",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.11",
     "zod": "^4.0.5"
   },
   "devDependencies": {
@@ -32,7 +34,6 @@
     "eslint": "^9",
     "eslint-config-next": "15.3.5",
     "postcss": "^8.5.6",
-    "tailwindcss": "3",
     "typescript": "^5"
   },
   "config": {

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;

tailwind.config.js

@@ -1,19 +0,0 @@
-import { heroui } from "@heroui/react";
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./providers/**/*.{js,ts,jsx,tsx,mdx}",
-    "./features/**/*.{js,ts,jsx,tsx,mdx}",
-    "./shared/**/*.{js,ts,jsx,tsx,mdx}",
-    "./widgets/**/*.{js,ts,jsx,tsx,mdx}",
-
-    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  darkMode: "class",
-  plugins: [heroui()],
-};