Add Typescript, TailwindCSS, and ESlint to your Next.js app
Tags: typescript, javascript, tailwindcss, nextjs
Published: 2021-08-23 06:42:35

---
canonical_url: https://blog.avneesh.tech/add-typescript-tailwindcss-and-eslint-to-your-nextjs-app
---

## Setting up the app
Creating a Next.js app

```
npx create-next-app next-tailwind-ts-demo
```

Starting the app

```
yarn dev # yarn
npm run dev # npm
```
Open  [localhost:3000](http://localhost:3000/) in your browser and you will be able to see a starter template of a Next.js app.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629529571943/3EVvZ0y57.png)

### Cleanup
Delete everything under the Head tag until the footer like this
```
import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  );
}
```

This will give you a clean canvas.

## Typescript

### What is  [Typescript](https://www.typescriptlang.org)?

TypeScript is a strongly typed programming language that builds on JavaScript giving you better tooling at any scale. It also provides better IntelliSense and fewer bugs in your app.

### Add Typescript to the app
Install the dependencies needed-
```
 yarn add --dev typescript @types/react # yarn
 npm i -D typescript @types/react # npm
```

- Create a `tsconfig.json` file in the root of the project

Now cut the terminal running the app and restart the terminal

```
yarn dev # yarn
npm run dev # npm
```

After you restart the server you should see this

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629529715508/vNgqzxKFE.png)

If you have some experience with typescript then I would recommend you setting strict mode to true in `tsconfig.json`
```
 "strict": true,
```

To use Typescript you need to change the file extension from `.js` to `.tsx`.
I am going to change `index.js` to `index.tsx` and `_app.js` to `_app.tsx`.

In `_app.tsx` you will see an error similar to this that the props have a type of any

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629530068648/Ttag5u33g.png)

So add the type of AppProps and import it from "next/app"

```
import { AppProps } from "next/app";
import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
```

Now you can use Typescript in your app 🎉.


## TailwindCSS
### What is  [TailwindCSS](https://tailwindcss.com)?

Tailwind is a CSS framework that helps you build websites very fast, without leaving your HTML.

I have been using Tailwind for quite a while now and would highly recommend you all trying it out.


### Adding Tailwind to the app

Installing the dependencies -
```
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest # yarn
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # npm
```

Generating the config files -
```
npx tailwindcss init -p
```

This will generate `tailwind.config.js` and `postcss.config.js`

Adding the files to purge through
Replace the purge in `tailwind.config.js` with this

```
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
```

Change your globals.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

![As usual](https://c.tenor.com/EbkaRJGMrdwAAAAM/as-usual-normal-thing.gif)
You need to restart the server
```
yarn dev # yarn
npm run dev # npm
```

Testing if it works-
In `index.tsx` I am going to create a centered hello world text with tailwind stylings
```
import Head from "next/head";

export default function Home() {
  return (
    <div className="w-screen h-screen flex justify-center items-center">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1 className="text-5xl font-bold">Hello world</h1>
    </div>
  );
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629531552462/X3UdTBPse.png)

![It worked](https://media0.giphy.com/media/7daGnHQsteMjQHVQKi/200.gif)

## ESLint
### What is  [ESLint](https://eslint.org) ?
Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. The primary reason ESLint was created was to allow developers to create their own linting rules. ESLint is designed to have all rules completely pluggable.

### Let's add ESLint

Add this line inside scripts in `package.json`
```
 "lint": "next lint"
```

These are all the scripts in `package.json`
```
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
     "lint": "next lint"
  },
```

Now run 

```
yarn lint # yarn
npm run lint # npm
```

After running this you will see a dropdown asking "How would you like to configure ESLint?". Just let it be the default one and then it will take some time to install the dependencies.

Now we have ESLint ready in our app 🥳.

**Checking for the linter**

If you are using bad practices in your code then it would highlight it with a yellow underline. For example, if I use the normal image instead of Next Image.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629532528200/mz-ra1z7u.png)

![Congrats](https://media0.giphy.com/media/NzeJJic0gjUaw8FoVV/giphy.gif)

You have successfully added Typescript, TailwindCSS, and ESlint to your Next.js app.


**Useful links -**

[Github repository](https://github.com/avneesh0612/tailwind-ts-eslint)

[Nextjs](https://nextjs.org)

[Typescript](https://www.typescriptlang.org)

[TailwindCSS](https://tailwindcss.com/)

[ESlint](https://eslint.org/)

[All socials](https://avneesh-links.vercel.app/)