Next.js + Typescript + tailwindcss Boilerplate
Tags: nextjs, react, typescript, tailwindcss
Published: 2021-01-08 10:08:54

React.js is a very popular library for building user interfaces (some might call it frontend framework). React create single-page-applications app by default, and for those people who wanted a server-side rendered website might need to do some extra steps which I personally don't think is beginner friendly.

## Here comes Next.js 🎉

When React is a single-page-applications app by default, Next.js provide hybrid static & server side rendering from the get go! It will save you a lot of time and hassle to setup a server side rendering on React.

### Typescipt

The next thing to ease your development flow is to use Typescript. It's a superset of the Javascript language and provides optional typing which will make your code easier to read and debug.

### tailwindcss

Tailwindcss is a utility-first CSS framework that can also be composed to build any design. In my opinion it really provide an easier way to style your component.

## TL;DR

You can check for the finished boilerplate on my Github bellow.

{% github https://github.com/rakumairu/next-ts-tailwindcss %}

If you want to do it from scratch, then let's do it!

## Create new project

You need to have [Node.js](https://nodejs.org/en/download/) installed, if you already installed Node.js then let's create a new Next.js project with their provided typescript example.

```
npx create-next-app --example with-typescript my-app
```

By using above command, it will automatically setup typescript for us. You can see other examples [here](https://github.com/vercel/next.js/tree/canary/examples)

After that you need to open the project folder with you IDE of choice, I'm using [VS Code](https://code.visualstudio.com/).

### Create _app.tsx file

_app.tsx file is the root of Next.js app, it doesn't come by default if we are using typescript example from Next.js. Therefore we'll need to add it ourself. Create file called _app.tsx inside pages folder

*/pages/_app.tsx*
```jsx
// eslint-disable-next-line
function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp
```

This code is grabbed from the default Next.js app template.

### Integrate tailwindcss

To integrate tailwindcss to our project, we need to install tailwindcss, postcss and autoprefixer.

## Install required packages

```
npm i tailwindcss@latest
```

## Create configuration file

After that we'll create tailwindcss' configuration file by running this command. It will create two files in your root project directory called **postcss.config.js** and **tailwind.config.js**.

```
npx tailwindcss init -p
```

I'll talk about the configuration files more later.

## Include tailwind in your CSS

There are two ways that you can do this. Either by importing `tailwindcss/tailwind.css` directly to your **_app.tsx** or you can create a styles folder and create a css file inside that folder and import the tailwindcss inside the CSS then import the CSS file to **_app.tsx**.

I personally prefer the second option because it will give more flexibility for the future when you want to include more CSS files.

*/styles/styles.css*
```css
/* @tailwind is a syntax from tailwindcss */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

*/pages/_app.tsx*
```jsx
import '../styles/styles.css'
// or
import 'tailwindcss/tailwind.css' // if you want to use the first option insted
// ...
```

After that, you'll be able to use tailwind classes in your project! But before that, let's setup 1 more thing that will improve your production build.

### Remove unused CSS

By default all of tailwind's CSS will be included on your build, of course you don't want that, it will only add more to your build size. Tailwind comes with an option to purge all unused CSS classes in your projects, tailwind will check for your file and determine which class is used and which not.

To configure the options let's open **tailwnd.config.js** and look for **purge** property, it's usually at the top, if there is none, you can add the property yourself.
On the purge property, add your files path that uses tailwindcss' classes.

*tailwind.config.js*
```js
module.exports = {
    purge: [
        './pages/**/*.tsx',
        // add more paths
    ],
    // ...
}
```

## And we are done!

You can use this boilerplate to start a new Next.js project or implement it on your current project by following the step by step guide.

There are more property in tailwind.config.js and I will cover it on my future articles!