Setup Tailwind, and PurgeCSS in Nextjs

Divine Hycenth3 min read

Published on March 06, 2021.

Last edited: March 06, 2021 by: Divine Hycenth

How to setup your Nextjs project with tailwindcss, purgecss, autoprefixer and postcss#

Prerequisites#

Basic knowledge of nextjs
Ensure you have git
Text Editor

Tailwindcss#

Tailwind css is a fantastic CSS framework that provides set of utility classes like other framework. One cool thing about tailwind css is its naming convention.

Setting up Tailwind with a frontend framework like React, Nextjs, Vuejs etc... can be tricky especially when you're trying to implement other libraries for optimization.

Installation 👣#

For this tutorial we are going to be using a simple hello next application i created. run the following to download the project:

git clone https://github.com/dnature/hello-next

cd hello-next

## install dependencies
npm install

Next i will open the project in my favorite text editor by running code .. VS Code

Now we are going to install tailwind css through the following command:

npm install tailwindcss

Next we will generate the default tailwind.config.js in the root directory by running:

npx tailwind init

Create a new stylesheet and call it tailwind.css then import the tailwind css library by adding the following lines of code

@tailwind base;
@tailwind components;
@tailwind utilities;

Next thing is to create a file and call it /_app.js in the pages directory and paste the following code to import tailwind.css .

import React from 'react';
import '../tailwind.css';

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

Lets apply some tailwind css selectors in our app to test if it's going to work:

import Link from 'next/link';

export default function Index() {
  return (
    <div className='container mx-auto bg-gray-200 flex flex-col justify-center items-center h-screen'>
      <p className='text-4xl'>Hello Next.js</p>

      <Link href='/about'>
        <a className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'>
          About
        </a>
      </Link>
    </div>
  );
}

import Link from 'next/link';

export default function About() {
  return (
    <div className='container mx-auto bg-gray-200 flex flex-col justify-center items-center h-screen'>
      <p className='text-2xl'>This is the about page</p>

      <Link href='/'>
        <a className='bg-yellow-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full'>
          Home
        </a>
      </Link>
    </div>
  );
}

😲 With just few lines of css selectors we got our app to look great

You may notice that the default tailwind bundle is up to 4mb but we can get rid of unused css selectors by adding some modules.

PurgeCss#

# install pugecss and postcss by running
npm i -D @fullhuman/postcss-purgecss autoprefixer postcss-preset-env

create a file and call it postcss.config.js then add the following piece of code:

module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
          './pages/**/*.{js,jsx,ts,tsx}',
          './components/**/*.{js,jsx,ts,tsx}',
          './tailwind.css',
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      },
    ],
    'postcss-preset-env',
  ],
};

For development purpose, its a good practice to not engage your computer in much processing tasks. Every enhancement/optimization techniques is best for production or testing purposes so we are going to perform these optimizations in production by tweaking our code a little bit.

module.exports = {
  plugins: [
    'tailwindcss',
    process.env.NODE_ENV === 'production' ? 'autoprefixer' : undefined,
    process.env.NODE_ENV === 'production'
      ? [
          '@fullhuman/postcss-purgecss',
          {
            content: [
              './pages/**/*.{js,jsx,ts,tsx}',
              './components/**/*.{js,jsx,ts,tsx}',
              './tailwind.css',
            ],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
          },
        ]
      : undefined,
    'postcss-preset-env',
  ],
};

Complete code https://github.com/dnature/hello-next

Conclusion#

Setting up tailwindcss, purgecss with nextjs is quite easy isn't it?. It does not require a lot of code to setup and our reward is the smooth experience users get when accessing our website/application.

Learn more#

How to reduce file sizes with Gulpjs

Edit this page