Introduction

Hello everyone. In this post, I am going to explain how to set up a project using NextJS, TailwindCSS and TypeScript. This blog will also serve as a guide for me to refer to in the future. This guide is not a in-depth guide to all the commands, but is rather is a kind of checklist you can refer too. I am assuming you have basic knowledge of running node applications.
Lets start.

Installing NextJS

The first step is installing nextJS. If you haven't created a npm checked directory yet. Create a new directory, cd into it and type

npm init -y

This will automatically generate a package.json file for you, with all default values.

The next step is to install next and other dependencies required to run the web-application. Here's how we do this

npm install next react react-dom

Once Next and React is successfully installed, we modify the npm scripts in package.json so that they run the appropriate scripts desired while developing and building next applications. Modify the scripts property in package.json to the following:

"scripts": {
  "dev": "next dev", // starts next in development mode
  "build": "next build", //builds the application for production usage
  "start": "next start" // starts a nexjs production server
}

This should complete the setup. Lets add some simple files to verify everything works as expected. Create a src/pages/ folder ( NextJS automatically serves files from this directory). Add an index.js file to this directory. Add a basic hello world react page to this file. Once done with this, type

npm run dev

to start the development environment. You should now be able to see your hello-world react page at the root (/) of the application on the appropriate port.

Adding TailwindCSS

Once we have finished setting up with NextJS, lets install TailwindCSS to help us with designing the application.
Let's start with installing Tailwind and required dependencies

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Now, Tailwind requires certain config files to run(see tailwind.config.js & postcss.config.js ). To install these run

npx tailwindcss init -p

This creates a minimal tailwind.config.js file at the root of the project

The next step is to configure tailwind to remove unused styles in production builds. We do this by modifying the purge parameter created in tailwind.config.js to

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

This completes the tailwind setup. The next step is to include tailwind with the css this is done by including

@tailwind base;
@tailwind components;
@tailwind utilities;

in the global css file. If you havent created a global css file yet, create a new file

src/styles/globals.css

and add the above tailwind directives to it.

Finally we import the css file into the jsx components. The way of doing this with nextJS is by creating a new src/pages/_app.js file which contains

import '../styles/globals.css' // or the location of your css file

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

export default MyApp

This adds the css to all pages, and you can use tailwind on all pages.
We can now start styling our components using the amazing TailwindCSS

Adding TypeScript support

First, we create an empty tsconfig.js file at the root of the directory. This specifies the next executable that we are using typescript in this project.

Again, the next step is installing typescript.

npm install --save-dev typescript @types/react @types/node

Finally, start the development server with

npm run dev

With this, nextJS does 2 things. It automatically populates the tsconfig.js file(You can change the configurations later) and it creates the next-env.d.ts file, which ensures Next.js types are picked up by the TypeScript compiler. You should not touch this file.

Coda

That's it. This completes the short tutorial. Reach out to me if you are facing issues with following the tutorial, or are facing any issues setting up these frameworks.