Setting up Tailwind CSS with Next.js in two minutes
Tags: tailwindcss, nextjs
Published: 2021-05-25 14:24:10

(Welcome to my first post on dev.to!)

[Tailwind CSS](https://tailwindcss.com) is a framework which supports you in creating front ends at pace. You can create visually stunning websites and applications without having to code a single line of CSS! It's great for getting projects off the ground quickly and ideal for prototypes (and full scale applications). Sounds amazing right?

Setting up tailwindcss in your next.js application is a breeze and this tutorial will show you how.

## Step 1 - Set up Next.js
*If you already have a Next.js application you can skip this step. Worth noting this tutorial assumes you are running Next.js version 10 or later.*

To setup your Next.js all you need to do is run the following command in your favourite terminal:

```
npx create-next-app my-tailwind-app
```
*Replace `my-tailwind-app` the the name of your application.*

For the following steps your terminal location needs to be in your application root, so run:
```
cd my-tailwind-app
```

## Step 2 - Install Tailwind
To use tailwind you need 3 packages, `tailwind`, `postcss` and `autoprefixer`.

```
# If you're using npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're using yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```

## Step 3 - Setup the config files
We need to set up two config files, one for tailwind and one for postcss. The simplest way to do this is to run:

```
npx tailwindcss init -p
```
Like magic `tailwind.config.js` and `postcss.config.js` will appear on your application root!

## Step 4 - Start the purge
Tailwind is a big library and you don't want loads of unused styles in your production app which could lead to poor front end performance.

Tailwind can purge all the unused styles, speeding things up nicely for your users.

Update your `tailwind.config.js` with the following:

```javascript
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
     extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: []
}
```

Here we are telling tailwind to look in our pages folder for the styles we use. This will cover off both JS and TypeScript files.

It's common to have other folders such as `/components` in our structure and you can easily add those folders to the `purge` array. For example:
```javascript
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}','./components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
     extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: []
}
```

## Step 5 - Include tailwind in your application
Now all you need to do is include tailwind in the application. Simply update `/pages/_app.js` with the following:

```javascript
import 'tailwindcss/tailwind.css'

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

export default MyApp
```

You will also want to remove the styling in your `/pages/index.js` application however you'll likely rewrite that file anyway.

All you need to do now is start writing your application! The docs over at https://tailwindcss.com/docs are fantastic and are a great resource to have to hand.

Enjoy building!