chore: migrate vue-example to Tailwind CSS v4 with Vite plugin

- Use @tailwindcss/vite and CSS-based config; remove postcss and tailwind.config.js
- Align root package-lock with dependency updates

Author: chaitanyapotti

examples/vue-example/package-lock.json

@@ -10,28 +10,29 @@
     "analyze": "source-map-explorer dist/assets/*.js dist/assets/*.map --no-border-checks"
   },
   "dependencies": {
-    "@toruslabs/constants": "^16.0.0",
+    "@toruslabs/constants": "^16.1.1",
     "@toruslabs/eccrypto": "^7.0.0",
-    "@toruslabs/fnd-base": "^16.0.0",
-    "@toruslabs/vue-components": "^8.1.2",
-    "@toruslabs/vue-icons": "^8.0.4",
+    "@toruslabs/fnd-base": "^16.1.1",
+    "@toruslabs/vue-components": "^9.0.1",
+    "@toruslabs/vue-icons": "^9.0.0",
     "@web3auth/auth": "../../",
     "bs58": "^6.0.0",
-    "core-js": "^3.48.0",
-    "viem": "^2.46.2",
-    "vue": "^3.5.28"
+    "core-js": "^3.49.0",
+    "viem": "^2.47.6",
+    "vue": "^3.5.30"
   },
   "devDependencies": {
-    "@toruslabs/eslint-config-vue": "^5.0.0",
+    "@tailwindcss/vite": "^4.2.2",
+    "@toruslabs/eslint-config-vue": "^5.0.1",
     "@types/bs58": "^5.0.0",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "autoprefixer": "^10.4.24",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "autoprefixer": "^10.4.27",
     "empty-module": "^0.0.2",
     "eslint": "^9.39.2",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "prettier": "^3.8.1",
     "source-map-explorer": "^2.5.3",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "vite": "^7.3.1"
   }

examples/vue-example/package.json

@@ -1,3 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import "tailwindcss";
+@import "@toruslabs/vue-components/web3auth-theme.css";
+
+@source "./index.html";
+@source "./src";
+@source "../node_modules/@toruslabs/vue-components/dist";
+
+/* Safelist dynamically generated order-* utilities */
+@source inline("order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10");
+
+@custom-variant dark (&:is(.dark *));

examples/vue-example/postcss.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import tailwind from "@tailwindcss/vite";
 import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
 
@@ -7,7 +8,7 @@ export default defineConfig({
   server: {
     port: 8080,
   },
-  plugins: [vue()],
+  plugins: [tailwind(), vue()],
   build: {
     sourcemap: true,
   },