Setting up Next.js and Tailwind CSS using the with-tailwind-css template
The easiest way to set up a Next.js project with Tailwind CSS configuration is by using the official Next js Tailwind CSS example template named with-tailwind-css.
This is a public repository on GitHub, maintained by the Next.js team, and can be used as a starter kit for a new Next.js project. The advantage of using this method is that it's fast and error-free, and it follows the best practices of setting up Tailwind CSS in Next.js.
Run the command below to setup a new Next.js project using the with-tailwind-css template:
npx create-next-app --example with-tailwindcss my-app-with-tailwind
The command above will install a new Next.js app named my-app-with-tailwind with Tailwind CSS already installed.