How To Use Tailwind CSS with Next.js

I often use Tailwind CSS in my projects, due to its flexibility and customizability. If you want to get up quickly with any new front-end project, Tailwind should be your choice.

In this article, you will learn how to install and import Tailwind CSS with Next.js

Create a Next.js project

npm init -y

This will create a package.js file in your project’s root. Open this folder and edit scripts property as follow

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

In your terminal install the necessary packages for Next.js

npm install --save next react react-dom

Create pages folder and add the index.js page in that folder:

export default () => (
  <div className="p-5 m-5 rounded shadow bg-gray-200">Hello Tailwind</div>
)

We can now run npm run dev to see our project running at http://localhost:3000.

npm run dev

Integrate Tailwind CSS

Install PostCss plugins: tailwindcss, postcss-import and autoprefixer

npm install tailwindcss postcss-import autoprefixer --save

Create postcss.config.js file, in your project root, and add the following configuration

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

Create a css file, in styles or css folder, and import tailwind styles

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

There are two ways to import your CSS files into Next.js project

Import your CSS file globally using _app.js file

Create _app.js file in your pages folder, and add the code below

import React from "react"
import App from "next/app"
import "../styles/tailwind.css"

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

Run the project, to show this “Hello world” example with Tailwind’s default style npm run dev

Import your CSS file locally using next-css package

Install next-css package

npm install @zeit/next-css

Open your next.config.js, create this file in the project root if it doesn’t exists, and add the following line

module.exports = require("@zeit/next-css")({})

In your index page or any other page import your css file

import "../styles/tailwind.css";
export default ...

Reducing file size with PurgeCSS

If we check the final bundle size of our application, we notice that Tailwind adds a large part of CSS. Fortunately, we can optimize this by adding PurgeCSS to our Next.js project.

npm install @fullhuman/postcss-purgecss --save

Reconfigure your postcss.config.js

const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    content: ["./components/**/*.js", "./pages/**/*.js"],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  },
]
module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
}