https://github.com/binodnepali/next-with-tailwindcss-example-template
A Next.js project with Tailwind CSS
https://github.com/binodnepali/next-with-tailwindcss-example-template
nextjs-starter nextjs-tailwind nextjs-tailwindcss-typescript nextjs-template tailwindcss-template
Last synced: 8 months ago
JSON representation
A Next.js project with Tailwind CSS
- Host: GitHub
- URL: https://github.com/binodnepali/next-with-tailwindcss-example-template
- Owner: binodnepali
- Created: 2022-12-04T18:46:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-22T21:41:15.000Z (over 2 years ago)
- Last Synced: 2025-05-19T02:07:14.518Z (10 months ago)
- Topics: nextjs-starter, nextjs-tailwind, nextjs-tailwindcss-typescript, nextjs-template, tailwindcss-template
- Language: JavaScript
- Homepage:
- Size: 216 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Next.js with tailwindcss example template
[](http://commitizen.github.io/cz-cli/)
This template was scaffolded from [nextjs-with-typescript-example-template](https://github.com/binodnepali/nextjs-with-typescript-example-template). And this template adds [tailwindcss](https://tailwindcss.com/) so that you can start a new project using [Nextjs 13](https://nextjs.org/) and [tailwindcss](https://tailwindcss.com/).
## Why this template
This template includes pre-installed plugins suchas [prettier](https://prettier.io/), [eslint](https://eslint.org/), [stylelint](https://stylelint.io/), [lint-staged](https://github.com/okonet/lint-staged), [commitlint](https://commitlint.js.org/) and [standard version](https://github.com/conventional-changelog/standard-version) which helps to maintain project code quality.
## Before getting started
Make sure you have installed [Node.js 16.8 or higher](https://nodejs.org/en/) on your machine. You can use [nvm](https://github.com/nvm-sh/nvm) to manage multiple node version on your machine.
## Getting started
You can setup this project using [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/) or [pnpm](https://pnpm.io/) package managers.
### Clone repo
```bash
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
```bash
cd nextjs-with-tailwindcss-example-template
```
### Install dependencies
```bash
pnpm i
#or
yarn install
#or
npm install
```
### Start development server
```bash
pnpm dev
#or
yarn dev
#or
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Build for production
```bash
pnpm build
#or
yarn build
#or
npm run build
```
### Start preview server after build
```bash
pnpm start
#or
yarn start
#or
npm run start
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Lint
```bash
pnpm lint
#or
yarn lint
#or
npm run lint
```
### Lint fix
```bash
pnpm lint:fix
#or
yarn lint:fix
#or
npm run lint:fix
```
### Lint style
```bash
pnpm lint:style
#or
yarn lint:style
#or
npm run lint:style
```
### Lint style fix
```bash
pnpm lint:style:fix
#or
yarn lint:style:fix
#or
npm run lint:style:fix
```
### Commit
Open interactive terminal to write conventional commit message
```bash
pnpm commit
#or
yarn commit
#or
npm run commit
```
### Run first release
This will create initial release.
```bash
pnpm release:first
#or
yarn release:first
#or
npm run release:first
```
### Run release
Follow the [Conventional Commits Specification](https://www.conventionalcommits.org/en/v1.0.0/) in your repository. And when you're ready to release, run below scripts.
```bash
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](https://nextjs.org/docs) - Learn about Next.js features and API
* [Next.js ESLint](https://nextjs.org/docs/basic-features/eslint) - Learn about how to Next.js ESLint setup
* [Prettier Setup](https://prettier.io/docs/en/install.html) - Learn about how to setup prettier
* [Prettier Integrations](https://prettier.io/docs/en/related-projects.html) - Learn about how to setup prettier with other tools
* [ESLint Setup](https://eslint.org/docs/user-guide/getting-started) - Learn about how to ESLint
* [StyleLint Setup](https://stylelint.io/user-guide/get-started) - Learn about how to setup StyleLint
* [Lint Staged Setup](https://github.com/okonet/lint-staged) - Learn about how to setup lint-staged
* [commitlint](https://commitlint.js.org/) - Learn about how to use commit lint
* [Standard Version](https://github.com/conventional-changelog/standard-version) - Learn about how to setup standar version