Hi everyone,
I’m facing a persistent and puzzling layout crash issue with my Next.js (v14.1.0) website, https://www.hongkongdryeyecentre.com/, which is deployed on Vercel. The UI was largely generated using v0.dev and styled with Tailwind CSS.
The Problem: The layout on my live deployed production site is severely crashed (styles seem missing or broken, elements are misaligned).
Key Observations & Symptoms:
- Works in v0 Preview: The layout looks perfectly normal and as expected in the v0.dev preview environment.
- No JavaScript Errors: When I inspect the crashed deployed site in a Chrome Incognito window (with all extensions disabled), there are no JavaScript errors reported in the console.
- Build Logs Clean: My Vercel deployment logs show a successful build with no errors related to Next.js, Tailwind, or CSS processing.
- Persistence: The issue seems to occur specifically with the Vercel production deployment. At one point, redeploying an older, known-good commit directly on Vercel did fix the issue temporarily. However, after making subsequent changes (managed via v0) and redeploying, the layout crash has reappeared and persists even if I try to redeploy that previously working commit again.
Tech Stack:
- Next.js 14.1.0 (App Router)
- Tailwind CSS
- v0.dev (for UI generation/management)
- Deployed on Vercel
What I’ve Tried So Far:
- Verifying no JavaScript errors in the browser console (Incognito mode).
- Checking Vercel deployment logs (they show successful builds).
- Attempting to redeploy older, previously working commits directly on Vercel (which initially helped but the problem has returned with new deployments).
- Reviewing
globals.cssandtailwind.config.jsfor obvious syntax errors (they seem okay).
Specific Questions for the Community:
- What could cause such a stark difference in layout rendering between the v0 preview (and potentially local production build) and the live Vercel deployment, especially when there are no JS errors?
- Are there any known issues or common pitfalls with Vercel’s production build optimizations for Next.js/Tailwind CSS that might lead to this kind of layout crash (e.g., related to CSS purging, minification, or how CSS custom properties/layers are handled)?
- What further debugging steps can I take specifically on the Vercel deployed environment to pinpoint why the CSS or layout structure is breaking?
- Could this be related to how v0.dev interacts with the Vercel deployment pipeline if changes are managed through v0?
I’m quite stuck as the usual debugging paths (console errors, build errors) aren’t showing obvious culprits for the deployed version. Any insights or suggestions would be hugely appreciated!
Thank you.
