Setup Next.js and Tailwind Project

Overview

Tailwind and Next.js work great together and take 5 minutes to get setup. This tutorial uses 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 Next.js project.


  > yarn create next-app

Answer the two questions from the prompt. 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 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 requires 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 to add vendor prefixes. This makes 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 at 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. Next.js has a concept called "Custom App", that allows you to inject global behavior. We'll want to import Tailwind at the root application level. Create a new file at pages/_app.js

If you aren't adding custom CSS classes, then import the tailwind package like this in app.js


  // option 1: I don't need custom css, tailwind is all I need

  import 'tailwindcss/tailwind.css'

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

  export default MyApp;

If you need custom css classes, use the following:


  //option 2: I'm going to create my own css classes

  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


  /*  option 2: required as part of option 2 */

  @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 running. Let's solve our customization and deployment needs.

Customization and Optimization

We have a good development setup, but we want to reduce the size of our deployed CSS for production. Tailwind has its own configuration file that enables customizations and plugins (like TailwindUI).

You'll need to add the tailwind config file.


  > npx tailwind init

This creates a tailwind.config.js file in the root of your project with a bare bones configuration. 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 file patterns to the purge configuration. PurgeCSS will scan those locations to optimize your CSS for the production build.