Skip to content

Commit

Permalink
feat: add instructions in README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
karthik-pepperdex committed Dec 11, 2021
1 parent d70b371 commit f396914
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 34 deletions.
49 changes: 31 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,42 @@
# Next.js + Tailwind CSS Example
# Next.js + TypeScript + TailwindCSS and ESLint Starter Template

This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v2.2)](https://blog.tailwindcss.com/tailwindcss-2-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
This is a simple and minimalistic Next.js, TypeScript, TailwindCSS and ESLint template with all the starter files and dependencies already setup and ready for you to use.

It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS.
**List of modules and libraries pre-installed in this template**:
- next
- tailwindcss
- postcss
- autoprefixer
- typescript
- eslint
- next-pwa

## Preview
**next**: The core library required for the functioning of Next.js. <br>
**tailwindcss**: The main library required for TailwindCSS along with **postcss** and **autoprefixer**. <br>
**typescript**: Library which enables us to use TypeScript. <br>
**eslint**: Library useful for setting up ESLint in our project. <br>
**next-pwa**: A Library used for making working PWA's(Progressive Web App's) easily in Next.js.

Preview the example live on [StackBlitz](http://stackblitz.com/):
# How and when to use this template

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
There are many developers who would like to have a stable workflow comprising of Next.js, TypeScript, TailwindCSS and ESLint which makes their coding a lot easier. This template is tailor-made for those developers. Installing all of these libraries on its own is a pain and time consuming. With this template, with a few steps that take a lot less time you are able to setup your workflow.

## Deploy your own
Now, how to use this template. This template is publicly available for you to use [here](https://github.com/avneesh0612/next-starter). You can click on **Use this template** which allows you to create a duplicate repository with the same files but in your GitHub account.

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
Proceeding further, you need to clone the repo locally to use it in your projects. You can do this via **git** or using the **zip file**.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
Now you have succesfully incorporated the starter template into your workflow! 🥳

## How to use
# Contributing Guide
In case of any contributions to this template, please make sure that your pull requests follow these basic rules:
- Please ensure that your pr's(Pull Requests) are relatable and applicable to the base intention of this template.
- Pr's can be in the form of any optimizations / better practices within the template.
- Please refrain from adding unnecessary features and over-engineering the template. Keep it simple.
- Making changes that are not applicable to the template will not be accepted.
- Improving the documentation will also be appreciated <br>
Hoping for optimal cooperation from contributors.

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
Before using this template, we suggest you to have a quick look at the [CODE_OF_CONDUCT.md](https://github.com/avneesh0612/next-starter/blob/main/CODE_OF_CONDUCT.md) and [CHANGELOG.md](https://github.com/avneesh0612/next-starter/blob/main/CHANGELOG.md)

```bash
npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
# License
[GNU General Public License](https://github.com/avneesh0612/next-starter/blob/main/LICENSE) © 2021 [Avneesh Agarwal](https://github.com/avneesh0612)
1 change: 0 additions & 1 deletion next-env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
Expand Down
21 changes: 6 additions & 15 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,29 +1,20 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
"jsx": "preserve",
"incremental": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

0 comments on commit f396914

Please sign in to comment.