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 or preview live with StackBlitz

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 Raghava-Chittidi Added Head Mar 12, 2023 976328f · Mar 12, 2023 History 3 Commits
components	components	Final Changes	Mar 12, 2023
models	models	Final Changes	Mar 12, 2023
pages	pages	Added Head	Mar 12, 2023
public	public	Initial commit from Create Next App	Feb 17, 2023
store	store	Final Changes	Mar 12, 2023
styles	styles	Final Changes	Mar 12, 2023
util	util	Final Changes	Mar 12, 2023
.gitignore	.gitignore	Initial commit from Create Next App	Feb 17, 2023
README.md	README.md	Initial commit from Create Next App	Feb 17, 2023
next.config.js	next.config.js	Initial commit from Create Next App	Feb 17, 2023
package-lock.json	package-lock.json	Final Changes	Mar 12, 2023
package.json	package.json	Final Changes	Mar 12, 2023
postcss.config.js	postcss.config.js	Initial commit from Create Next App	Feb 17, 2023
tailwind.config.js	tailwind.config.js	Initial commit from Create Next App	Feb 17, 2023
tsconfig.json	tsconfig.json	Final Changes	Mar 12, 2023