DEV Community

Cover image for Add Typescript, TailwindCSS, and ESlint to your Next.js app
Avneesh Agarwal
Avneesh Agarwal

Posted on • Updated on • Originally published at blog.avneesh.tech

Add Typescript, TailwindCSS, and ESlint to your Next.js app

Setting up the app

Creating a Next.js app

npx create-next-app next-tailwind-ts-demo
Enter fullscreen mode Exit fullscreen mode

Starting the app

yarn dev # yarn
npm run dev # npm
Enter fullscreen mode Exit fullscreen mode

Open localhost:3000 in your browser and you will be able to see a starter template of a Next.js app.

image.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>
  );
}
Enter fullscreen mode Exit fullscreen mode

This will give you a clean canvas.

Typescript

What is Typescript?

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

After you restart the server you should see this

image.png

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

 "strict": true,
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

Now you can use Typescript in your app πŸŽ‰.

TailwindCSS

What is TailwindCSS?

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
Enter fullscreen mode Exit fullscreen mode

Generating the config files -

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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}"],
Enter fullscreen mode Exit fullscreen mode

Change your globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

As usual
You need to restart the server

yarn dev # yarn
npm run dev # npm
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

image.png

It worked

ESLint

What is ESLint ?

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"
Enter fullscreen mode Exit fullscreen mode

These are all the scripts in package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
     "lint": "next lint"
  },
Enter fullscreen mode Exit fullscreen mode

Now run

yarn lint # yarn
npm run lint # npm
Enter fullscreen mode Exit fullscreen mode

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

Congrats

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

Useful links -

Github repository

Nextjs

Typescript

TailwindCSS

ESlint

All socials

Top comments (4)

Collapse
 
jennasisis profile image
Akihito Mikazuki

this is exactly what i was looking for- you read my mind.

Collapse
 
avneesh0612 profile image
Avneesh Agarwal

Aha, that is great

Collapse
 
rksingh620 profile image
Rohit Kumar Singh

Awesome post. Simple and to the point.

Collapse
 
avneesh0612 profile image
Avneesh Agarwal

Glad you liked it