Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v3.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

Deploy your own

Deploy the example using Vercel

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app

yarn create next-app --example with-tailwindcss with-tailwindcss-app

pnpm create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

Name	Name	Last commit message	Last commit date
Latest commit History 10 Commits 10 Commits
.vscode	.vscode
app	app
components	components
lib	lib
pages/api	pages/api
public	public
schemas	schemas
styles	styles
.gitignore	.gitignore
LICENSE	LICENSE
README.md	README.md
next.config.js	next.config.js
package-lock.json	package-lock.json
package.json	package.json
postcss.config.js	postcss.config.js
sanity.cli.ts	sanity.cli.ts
sanity.config.ts	sanity.config.ts
structure.ts	structure.ts
tailwind.config.js	tailwind.config.js
theme.ts	theme.ts
tsconfig.json	tsconfig.json
typings.d.ts	typings.d.ts