example(tanstack): Tailwind v4 via @tailwindcss/vite + base import

Author: regenrek

example/tanstack-app/package.json

@@ -18,14 +18,15 @@
     "zod": "^4.0.17"
   },
   "devDependencies": {
-    "@browser-echo/vite": "1.0.2",
+    "@browser-echo/vite": "1.1.0",
+    "@tailwindcss/vite": "^4.1.13",
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^4.1.12",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.9.2",
     "vite": "^7.1.3",
     "vite-tsconfig-paths": "^5.1.4"

example/tanstack-app/src/styles/app.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 @layer base {
   html {

example/tanstack-app/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import tsConfigPaths from 'vite-tsconfig-paths'
 import viteReact from '@vitejs/plugin-react'
 import browserEcho from '@browser-echo/vite'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   server: {
@@ -14,6 +15,7 @@ export default defineConfig({
     }),
     tanstackStart({ customViteReactPlugin: true }),
     viteReact(),
-    browserEcho({ injectHtml: false, stackMode: 'condensed', mcp: { url: 'http://localhost:5179' } }),
+    tailwindcss(),
+    browserEcho({ injectHtml: false, stackMode: 'condensed', networkLogs: { enabled: true } }),
   ],
 })