Next.js with tailwindcss example template

This template was scaffolded from nextjs-with-typescript-example-template. And this template adds tailwindcss so that you can start a new project using Nextjs 13 and tailwindcss.

Why this template

This template includes pre-installed plugins suchas prettier, eslint, stylelint, lint-staged, commitlint and standard version which helps to maintain project code quality.

Before getting started

Make sure you have installed Node.js 16.8 or higher on your machine. You can use nvm to manage multiple node version on your machine.

Getting started

You can setup this project using npm, yarn or pnpm package managers.

Clone repo

git clone https://github.com/binodnepali/nextjs-with-tailwindcss-example-template.git
#or
git clone git@github.com:binodnepali/nextjs-with-tailwindcss-example-template.git

Navigate to cloned repo

cd nextjs-with-tailwindcss-example-template

Install dependencies

pnpm i
#or
yarn install
#or
npm install

Start development server

pnpm dev
#or
yarn dev
#or
npm run dev

Open http://localhost:3000 with your browser to see the result.

Build for production

pnpm build
#or
yarn build
#or
npm run build

Start preview server after build

pnpm start
#or
yarn start
#or
npm run start

Open http://localhost:3000 with your browser to see the result.

Lint

pnpm lint
#or
yarn lint
#or 
npm run lint

Lint fix

pnpm lint:fix
#or
yarn lint:fix
#or 
npm run lint:fix

Lint style

pnpm lint:style
#or
yarn lint:style
#or 
npm run lint:style

Lint style fix

pnpm lint:style:fix
#or
yarn lint:style:fix
#or 
npm run lint:style:fix

Commit

Open interactive terminal to write conventional commit message

pnpm commit
#or
yarn commit
#or 
npm run commit

Run first release

This will create initial release.

pnpm release:first
#or
yarn release:first
#or
npm run release:first

Run release

Follow the Conventional Commits Specification in your repository. And when you're ready to release, run below scripts.

pnpm release
#or
yarn release
#or
npm run release

Learn More

To learn more about Next.js, ESLint, Prettier, StyleLint and lint-staged, take a look at the following resources:

• Next.js Documentation - Learn about Next.js features and API
• Next.js ESLint - Learn about how to Next.js ESLint setup
• Prettier Setup - Learn about how to setup prettier
• Prettier Integrations - Learn about how to setup prettier with other tools
• ESLint Setup - Learn about how to ESLint
• StyleLint Setup - Learn about how to setup StyleLint
• Lint Staged Setup - Learn about how to setup lint-staged
• commitlint - Learn about how to use commit lint
• Standard Version - Learn about how to setup standar version