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

Tech:

• Webhook - CONNECT with Firestore Database and shift all the contents over

  • stripe listen --forward-to localhost:3000/api/webhook

• Stripe Checkout

• React

• NextJS

• TailwindCSS

• NextAuth

• Firebase Firestore

• Redux

• Firebase

• Fake Store API - support shopping items

• react-responsive-carousel - Banner Image auto play

• react-currency-format

• Micro

• firebase-admin

Features:

• User login with GoogleAccount
• Select Product and broswer the products in Shopping Basket
• User checkout the basket by Stripe
• After Accept payment, User can check their order in Order Page

Deploy the example using Vercel or preview live with StackBlitz

How to use

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).