nextjs - 💡(How to fix) Fix Deployment builds successfully but Tailwind CSS is not applied [1 comments, 2 participants]

Link to the code that reproduces this issue

https://github.com/jjrmrcly79/ecommerce

To Reproduce

Clone the repository: git clone https://github.com/jjrmrcly79/ecommerce.git

Install dependencies: yarn install

Run the local development server: yarn dev. Observe that the application runs perfectly and all Tailwind CSS styles are applied correctly.

Deploy the project to Vercel by connecting the GitHub repository.

Add the required Supabase environment variables (NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY) in the Vercel project settings.

Visit the production URL provided by Vercel after the deployment completes successfully.

Current vs. Expected behavior

Current Behavior:

The project builds and deploys successfully on Vercel without any errors in the build logs. However, the deployed site renders as plain, unstyled HTML. All Tailwind CSS styles are completely missing. The browser's network tab shows that the main CSS file might be empty or not generated/linked correctly during the Vercel build process.The deployed site on Vercel should be visually identical to the local development environment (yarn dev), with all Tailwind CSS utility classes and custom styles applied correctly from globals.css.

Provide environment information

! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-10.17.1.tgz

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Mon Aug 25 21:17:56 PDT 2025; root:xnu-12377.1.9~3/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 11
Binaries:
  Node: 22.19.0
  npm: 10.9.3
  Yarn: 1.22.22
  pnpm: 10.17.1
Relevant Packages:
  next: 14.2.32 // An outdated version detected (latest is 15.5.3), upgrade is highly recommended!
  eslint-config-next: 14.2.32
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.9.2
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 15.5.3), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

This issue is only reproducible on Vercel. The application works perfectly in the local development environment.

We have performed an exhaustive debugging process and have ruled out all common causes:

Vercel Configuration: The project was completely deleted and recreated from scratch to eliminate any "ghost" settings. The project is connected to the correct Git repository, and it deploys the correct commit.

Environment Variables: All required environment variables are correctly set in the Vercel dashboard.

Code & Config Files: We have manually verified that tailwind.config.ts (content paths), postcss.config.js, tsconfig.json (baseUrl), and the import in src/app/layout.tsx are all correct according to the official documentation.

Dependencies: We found and fixed a React version mismatch (@types/react@19 vs react@18) and added the missing autoprefixer package. A fresh, clean yarn.lock file was generated and pushed to the repository, which Vercel is using for the build.

Browser Cache: The issue is not related to browser cache; it has been tested on multiple devices and in incognito mode.

Vercel Build Cache: We have attempted to redeploy with the Vercel build cache cleared, and the issue persists.