Next.js Setup Hell: What Actually Went Wrong with My Tailwind + App Directory

Next.js Setup Hell: What Actually Went Wrong with My Tailwind + App Directory

I spent way too many hours wondering why my Next.js + Tailwind project wasn’t styling anything right. Components were rendering plain, styles weren’t applying, and I was constantly second-guessing my setup.

Here’s what happened (and how you can avoid it).

The Problem

I accidentally had two app directories in my project:

  • One inside the src/ folder
  • One at the root level

Because I had followed a few different tutorials and moved things around, I ended up with duplicated layout.tsx, conflicting routes, and Tailwind not applying styles as expected.

This caused:

  • Tailwind styles to fail silently
  • Route conflicts
  • Layouts not rendering properly

And the worst part? There were no real error messages — just broken UIs.

What I Learned

  • The app/ directory should be at the root (not inside src/ unless you really know what you're doing)
  • Stick to a consistent project structure — especially with new frameworks
  • Tailwind config only works if your paths are right and files are in expected locations
  • When in doubt, simplify — delete what’s not needed, and rebuild from what you know works

How I Fixed It

  1. Deleted the duplicate app/ folder

  2. Moved everything under one clean app/ directory at the root

  3. Reinstalled Tailwind cleanly:

    npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

  4. Fixed my tailwind.config.ts paths: content: [ "./app//*.{js,ts,jsx,tsx,mdx}", "./components//*.{js,ts,jsx,tsx,mdx}", ],

  5. Finally, I restarted the dev server using: npm run dev, and everything finally worked!

Getting the initial setup right with Next.js and Tailwind can feel like a rite of passage. Sometimes it’s not your code — it’s your folder structure.

So if your styles aren’t showing up, double-check your file structure. One misplaced directory can throw everything off.