Set up NextJS, TailwindCSS and TypeScript
Published: 2021-01-31 15:40:40

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/guscblvulxo3b7tgsakx.png)

# 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.