The Next.js + Tailwind CSS Example is an official boilerplate from Vercel's Next.js repository that shows how to integrate Tailwind CSS v3.0 into a Next.js app, following the steps in the official Tailwind docs. It serves as a ready-to-run starting point for developers who want to build styled web apps with the utility-first CSS framework and the React-based Next.js platform.
What is the Next.js + Tailwind CSS Example?
This template is a minimal Next.js project with Tailwind CSS v3.0 already wired up. It takes a fresh Next.js application and adds the Tailwind tooling required for utility-first styling, producing a styled app you can run locally or deploy. The example is maintained by Vercel as part of the next.js GitHub repository, so it tracks the current recommended setup for combining these two tools. It is designed to be bootstrapped with create-next-app and deployed to Vercel with a single click.
Key Features
- Tailwind CSS v3.0 integration — Uses the v3.0 release and follows the official guide for configuring Tailwind with Next.js.
- create-next-app bootstrapping — You can generate the project with
npx create-next-app --example with-tailwindcss, or the Yarn/Pnpm equivalents. - Three package managers supported — npm, Yarn, and pnpm all work with the example command.
- One-click Vercel deployment — The README includes a deploy button that takes you to a Vercel project creation page pre-filled with the repository URL.
- Live preview via StackBlitz — The example can be previewed in the browser at StackBlitz without local setup.
- Official maintenance — Lives in Vercel's next.js repo, ensuring it matches each Next.js release.
Who should use it?
- Developers learning Tailwind — See a complete, working example of Tailwind v3 in a Next.js project instead of reading setup docs in the abstract.
- Next.js developers — Use it as a base for any project where you want utility classes ready immediately, avoiding manual configuration.
- Teams shipping to Vercel — Start a new app with a pre-configured style system and deploy straight to Vercel from the example.
What can you do with it?
- Scaffold a styled Next.js app: Run the create-next-app command with the example flag to get a project where Tailwind is already active, so you can start writing utility classes right away.
- Deploy to production: Use the Vercel button or the Vercel CLI to push the example to a live URL without writing deployment configuration.
- Preview in the browser: Open the StackBlitz preview to test the template before you even download it.
How does it work?
Use one of three commands, depending on your package manager, to bootstrap a project: npx create-next-app --example with-tailwindcss, yarn create next-app --example with-tailwindcss, or pnpm create next-app --example with-tailwindcss. The generated project contains all the files needed to compile Tailwind CSS v3 with Next.js. After that, you develop locally and deploy with Vercel.
FAQ
How do I start a project with this template?
Run one of the create-next-app commands from the README, replacing the final argument with your app name, for example: npx create-next-app --example with-tailwindcss my-app. This creates a local folder and installs everything.
Does the template cost anything?
The page does not mention any pricing. It is a public example in the open-source next.js repository maintained by Vercel, so you can use it freely and deploy it without licensing fees.
Can I deploy to a platform other than Vercel?
The README specifically shows deployment with Vercel and preview with StackBlitz. Since the project is a standard Next.js app, you can also deploy it to other hosting providers that support Next.js, but only Vercel instructions are provided.
What version of Tailwind CSS does it use?
The template references Tailwind CSS v3.0, as announced in the Tailwind blog post linked from the README. It follows the official guide for setting up Tailwind with Next.js.
