Setting Up Next.js 15 with Tailwind v4 and shadcn/ui — What Actually Changed

I recently set up a new project with Next.js 15 (App Router), Tailwind CSS v4, and shadcn/ui. If you're coming from Tailwind v3, some things have changed and the official docs don't always make it obvious what breaks. Here's what I ran into and how I got everything working. Initial setup npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir cd my-app As of Next.js 15, create-next-app installs Tailwind v4 by default. This is where the differences start. What changed in Tailwind v4 No more tailwind.config.js This was the biggest surprise. Tailwind v4 uses CSS-based configuration instead of a JavaScript config file. Your customization now lives in your CSS file: /* src/app/globals.css */ @import "tailwindcss" ; @theme { --color-brand : #2563eb ; --color-brand-dark : #1d4ed8 ; --color-surface : #0f0f0f ; --color-surface-light : #1a1a1a ; --color-border : #2a2a2a ; --font-sans : "Inter" , system-ui , sans-serif ; --font-mono : "JetBrains Mono" , monospace ; --ra