How to Set Up a Next.js 15 Project with Tailwind CSS v4
A step-by-step guide to creating a new Next.js 15 project with Tailwind CSS v4, TypeScript, and the App Router. From zero to a styled page in under 10 minutes.
Why this combination matters
Next.js 15 and Tailwind CSS v4 are the current standard for building modern web applications. Next.js gives you file-based routing, server components, and automatic code splitting. Tailwind v4 gives you a utility-first CSS framework that's faster and simpler than previous versions — no config file required.
Together, they let you go from an empty folder to a deployed, styled application in minutes. This guide covers the exact steps.
Step 1: Create the project
Run npx create-next-app@latest and select TypeScript, Tailwind CSS, ESLint, and the App Router when prompted. The CLI handles everything — installing dependencies, setting up the file structure, and configuring TypeScript.
If you prefer manual setup, you can run npm init -y, then install next, react, react-dom, tailwindcss, and @tailwindcss/postcss. But the CLI is faster and less error-prone.
Step 2: Understand the file structure
Next.js 15 uses the App Router by default. Your pages live in src/app/, and each folder becomes a route. The page.tsx file in each folder is the page component, and layout.tsx wraps it with shared UI like headers and footers.
Tailwind v4 doesn't need a tailwind.config file for basic usage. Your styles start with a single @import 'tailwindcss' in globals.css. If you need to customize the theme, you can add a @theme block directly in CSS — no JavaScript config needed.
Step 3: Build your first page
Open src/app/page.tsx and replace the default content with your own. Start with a simple layout: a container div with max-w-4xl mx-auto px-6 py-12, a headline with text-4xl font-bold, and a paragraph with text-zinc-400. Save the file and check localhost:3000.
That's it. No build step, no CSS file to import, no class name conflicts. Tailwind utility classes give you complete control over every visual property directly in your JSX.
Step 4: Add a layout
Edit src/app/layout.tsx to add a consistent header and footer. Import a Google Font using next/font/google — Geist is a popular choice. Set the font variable on the body element and you're done.
The layout component wraps every page in your application. It's the right place for navigation bars, meta tags, and global styles. Nested layouts are supported too — you can have a different layout for your blog vs your marketing pages.
Step 5: Deploy to Vercel
Push your project to GitHub and import it on vercel.com. Vercel detects Next.js automatically, runs npm run build, and deploys it to a global CDN. Total time from code to live URL: about 2 minutes.
Your site now has automatic HTTPS, preview deployments for every branch, and edge caching. For most projects, the free tier is more than enough.
Next steps
From here, you can add more pages, create API routes in src/app/api/, connect a database, or add authentication. The foundation is solid — Next.js and Tailwind scale from single-page sites to complex applications without architecture changes.
If you want a head start, download one of our free Next.js templates. They're built with this exact stack and include common patterns like responsive navigation, feature grids, and contact forms. Or if you need something custom-built for your business, we do that too.
Need a custom version?
We build it for you.
Custom web applications, business systems, and marketing sites — built to your exact specifications. Projects starting from $2K.