Setup Next.js and Tailwind Project

Overview

Tailwind and NextJS work great together and take 5 minutes to get setup. This tutorial was written with Next.js 9.4 and Tailwind 1.4.

First, setup the NextJS project

Open your terminal and run through the following steps. First create your new NextJS project.

yarn create next-app

You'll be prompted to answer two questions. My selections are below.

What is your project named? myapp
Pick a template > Default starter app

Navigate to your project directory and run the app to verify it's working.

cd mypage
yarn dev

You can access your app on http://localhost:3000

Next, clean up the unneeded markup

Navigate to pages/index.js and update the page to just the following.

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h2 className="text-xl text-blue-500 mx-auto">NextJS + Tailwind</h2>
      </main>

    </div>
  )
}

Add and configure Tailwindcss

Configuring Tailwind will require the following steps.

Adding the dependencies
Adding the postcss.config.js file
Creating a new _app.js custom app file and importing tailwind

Adding the dependencies

We will add 3 dependencies to our project.

tailwindcss - the official tailwind package
postcss-import - needed by tailwind to inline import rules content
autoprefixer - a postcss plugin that adds vendor prefixes (to make your styles more resilient across browsers)

yarn add tailwindcss autoprefixer postcss-import

Adding the postcss.config.js file

Next, you'll want to let postcss know about these plugins. Create a new file called postcss.config.js in the root of your project, with the following contents.

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer"
  ]
};

Creating a new _app.js custom app file and importing tailwind

If you are new to Next.js, the next step is a little unintuitive. NextJS has a concept called "Custom App", that allows you to inject global behavior. We'll want to inject Tailwind at the root application level.

Create a new file at pages/_app.js.

If you don't need your own CSS classes, then simply import the tailwind package like this:

import 'tailwindcss/tailwind.css'

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

export default MyApp;

If you are going to have custom css classes, then do the following:

import '../css/main.css'

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

export default MyApp;

Create your main css directory and file that imports Tailwind at css/main.css with the contents:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* add your css classes below */

That's it! You have a basic NextJS and TailwindCSS app up and running. Let's add a couple additional items to solve our customization and deployment needs.

Customization and Optimization

What we have built so far is great for development, but if we want to go production, we'll also want to use PurgeCSS in order to reduce the size of the CSS utility classes built with your project.

Tailwind has its own configuration file that allows for additional customizations and plugins (like TailwindUI).

You'll need to add the tailwind config file.

npx tailwind init

Running this command will create a new tailwind.config.js file in the root of your project with a bare bones configuration file. Let's update this file to turn on the built in PurgeCSS support (as of version tailwind 1.4).

module.exports = {
  purge: ['./pages/*.js', './components/*.js'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

You can pass an array of file patterns to the purge properties. PurgeCSS will then scan these files and remove any utilities classes that it doesn't see in your code and files configured for scanning.