Next.js + Tailwind CSS Example

The Next.js + Tailwind CSS Example is an official boilerplate from the Next.js repository that wires Tailwind CSS v2.2 into a Next.js app for utility-first styling out of the box.

What is the Next.js + Tailwind CSS Example?

The Next.js + Tailwind CSS Example is a starter template maintained in the vercel/next.js GitHub repository that scaffolds a Next.js application with Tailwind CSS preconfigured. It takes a project name as the only input and produces a working Next.js app with tailwind.config.js, PostCSS setup, and a default index page using Tailwind utility classes. The template runs on Node.js via the Next.js framework and is published as part of the official create-next-app examples directory.

Key Features

• Official Next.js example — Lives inside the vercel/next.js repository under examples/with-tailwindcss and is updated with the Next.js canary branch.
• Tailwind CSS v2.2 — Uses Tailwind CSS version 2.2 rather than the current latest, following the integration steps in the official Tailwind Next.js guide.
• Just-in-Time mode — Enables Tailwind's JIT compiler so utilities are generated on demand, which reduces CSS bundle size and speeds up build times for large projects.
• One-command bootstrap — Run npx create-next-app --example with-tailwindcss with-tailwindcss-app or the Yarn equivalent to get a local copy in seconds.
• One-click Vercel deployment — The README includes a "Deploy with Vercel" button that provisions a new project directly from the example.
• StackBlitz live preview — A "Open in StackBlitz" button lets you edit and run the template in the browser without installing anything locally.

Who is it for?

• Next.js beginners who want a minimal, working setup of Tailwind CSS without writing configuration from scratch. They can study the tailwind.config.js and postcss.config.js files included in the scaffold.
• Frontend developers building marketing sites, landing pages, or dashboards who prefer utility-first styling and want a clean foundation to extend.
• Prototypers who need a fast way to spin up a deployable app: the StackBlitz preview and Vercel deploy button remove the need to set up a local environment.

What can you do with the template?

• Scaffold a new project: Run the create-next-app command with the example flag to generate a folder containing a ready-to-run Next.js app with Tailwind wired up.
• Preview and iterate in the cloud: Open the StackBlitz preview to edit the default index page in the browser and see Tailwind JIT compile utilities live.
• Deploy to production: Click the Vercel deploy button or push the repo to Vercel to get a live HTTPS URL; the example deploys without further configuration.

How does it work?

The scaffold configures Tailwind CSS through PostCSS: the postcss.config.js file loads tailwindcss, and tailwind.config.js defaults to content scanning from pages and components. When you run npm run dev, Next.js starts a development server and Tailwind JIT generates only the utility classes used in your JSX. For production, npm run build and npm run start produce a statically exportable or server-rendered app that can be hosted anywhere, including Vercel.

FAQ

Is the Next.js + Tailwind CSS Example free?

Yes. The template is part of the open-source Next.js repository on GitHub, and you can use it commercially or personally without payment. The only indirect cost is the hosting platform if you deploy.

How do I start a project from this template?

Run npx create-next-app --example with-tailwindcss with-tailwindcss-app in your terminal, replacing the last argument with your chosen folder name. Alternatively, use yarn create next-app --example with-tailwindcss with-tailwindcss-app.

Which Tailwind CSS version does it use?

The example specifies Tailwind CSS v2.2 and activates the new Just-in-Time mode, so it does not use Tailwind v3 classes. If you need v3, you'd update the dependency yourself.

Can I deploy this to Vercel?

Yes. The README includes a dedicated "Deploy with Vercel" button that creates a Vercel project from a GitHub repository containing this example, and the Next.js deployment documentation covers further options.