chore: upgrade Vite, TailwindCSS to v4, and React to v19

- Followed Tailwind v4 upgrade guide; added `@config "../tailwind.config.js";` in `app.css` for compatibility with v3 packages (e.g., Tremor).
- Ran React 19 codemod (`react/19/migration-recipe`) with no changes required; removed deprecated APIs per React 19 upgrade guide.
- Updated Vite to latest version.
- Misc fixes: added `cursor-pointer` to buttons, renamed `context.jsx` to `context.tsx`, adjusted for renamed Tailwind utilities.

Author: jaeyson

assets/copy/package.json

@@ -7,23 +7,22 @@
     "build-server": "tsc && vite build --ssr js/server.js --out-dir ../priv/react-components --minify esbuild && echo '{\"type\": \"module\" } ' > ../priv/react-components/package.json"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.4.7",
     "@tailwindcss/forms": "^0.5.7",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.12",
-    "typescript": "^5.6.2",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.4",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0"
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^6.3.3"
   },
   "dependencies": {
     "live_react": "file:../deps/live_react",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
     "topbar": "^2.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
   }
 }

assets/copy/postcss.config.js

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

assets/copy/vite.config.js

@@ -1,5 +1,6 @@
 import path from "path";
 import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
 
 import react from "@vitejs/plugin-react";
 import liveReactPlugin from "live_react/vite-plugin";
@@ -11,7 +12,11 @@ export default defineConfig(({ command }) => {
   return {
     base: isDev ? undefined : "/assets",
     publicDir: "static",
-    plugins: [react(), liveReactPlugin()],
+    plugins: [
+      react(),
+      liveReactPlugin(),
+      tailwindcss(),
+    ],
     ssr: {
       // we need it, because in SSR build we want no external
       // and in dev, we want external for fast updates

guides/installation.md

@@ -210,7 +210,7 @@ cd assets
 npm install -D vite @vitejs/plugin-react
 
 # tailwind
-npm install -D tailwindcss autoprefixer postcss @tailwindcss/forms
+npm install -D @tailwindcss/forms @tailwindcss/postcss @tailwindcss/vite
 
 # typescript
 npm install -D typescript @types/react @types/react-dom

live_react_examples/assets/css/app.css

@@ -1,6 +1,8 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss";
+
+/* using legacy config file */
+/* https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file */
+@config "../tailwind.config.js";
 
 @layer base {
   :root {