feat: upgrade tailwindcss v4 and heroui tailwindcss v4 upgrade

.gitignore

@@ -13,7 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+}

package.json

@@ -10,27 +10,29 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@heroui/button": "2.2.22",
-    "@heroui/code": "2.2.16",
-    "@heroui/dropdown": "2.3.22",
-    "@heroui/input": "2.4.22",
-    "@heroui/kbd": "2.2.17",
-    "@heroui/link": "2.2.19",
-    "@heroui/navbar": "2.2.20",
-    "@heroui/snippet": "2.2.23",
-    "@heroui/switch": "2.2.20",
-    "@heroui/system": "2.4.18",
-    "@heroui/theme": "2.4.17",
-    "@heroui/use-theme": "2.1.9",
+    "@heroui/button": "2.2.23",
+    "@heroui/code": "2.2.17",
+    "@heroui/dropdown": "2.3.23",
+    "@heroui/input": "2.4.23",
+    "@heroui/kbd": "2.2.18",
+    "@heroui/link": "2.2.20",
+    "@heroui/navbar": "2.2.21",
+    "@heroui/snippet": "2.2.24",
+    "@heroui/switch": "2.2.21",
+    "@heroui/system": "2.4.19",
+    "@heroui/theme": "2.4.18",
+    "@heroui/use-theme": "2.1.10",
     "@react-aria/visually-hidden": "3.8.25",
     "@react-types/shared": "3.30.0",
+    "@tailwindcss/postcss": "4.1.11",
+    "@tailwindcss/vite": "4.1.11",
     "clsx": "2.1.1",
-    "framer-motion": "11.15.0",
+    "framer-motion": "11.18.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.23.0",
-    "tailwind-variants": "0.3.0",
-    "tailwindcss": "3.4.16"
+    "tailwind-variants": "1.0.0",
+    "tailwindcss": "4.1.11"
   },
   "devDependencies": {
     "@eslint/compat": "1.2.8",
@@ -42,7 +44,6 @@
     "@typescript-eslint/eslint-plugin": "8.31.1",
     "@typescript-eslint/parser": "8.31.1",
     "@vitejs/plugin-react": "4.4.1",
-    "autoprefixer": "10.4.21",
     "eslint": "9.25.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
@@ -53,7 +54,7 @@
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-unused-imports": "4.1.4",
     "globals": "16.0.0",
-    "postcss": "8.5.3",
+    "postcss": "8.5.6",
     "prettier": "3.5.3",
     "typescript": "5.6.3",
     "vite": "5.2.0",

postcss.config.js

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

src/components/primitives.ts

@@ -14,7 +14,7 @@ export const title = tv({
     },
     size: {
       sm: "text-3xl lg:text-4xl",
-      md: "text-[2.3rem] lg:text-5xl leading-9",
+      md: "text-[2.3rem] lg:text-5xl",
       lg: "text-4xl lg:text-6xl",
     },
     fullWidth: {

src/styles/globals.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@config "../../tailwind.config.js"

vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), tailwindcss()],
 });