Tailwind JIT with Next.js

Tailwind CSS is a utility-first CSS framework which allows developers to rapidly build modern websites. In version 2.1, Tailwind CSS introduces a new just-in-time compiler that generates styles on demand as you write your templates instead of generating everything in advance at initial build time.

There are some advantages of using just-in-time mode:

In this tutorial, I would like to demonstrate how to use Tailwind JIT with Next.js.

Start by creating a new Next.js project if you have not set one up yet.

# Create a directory called my-project
mkdir my-project
cd my-project

# Initialise project
yarn init -y

# Install required modules for Next.js
yarn add -E next react react-dom

Install Tailwind and its peer-dependencies using npm. Make sure you have Node.js v12.13.0 or higher installed in your system as it is required by Tailwind.

yarn add -DE tailwindcss postcss autoprefixer

Next, generate your tailwind.config.js and postcss.config.js files.

yarn tailwindcss init -p

This will create a default Tailwind configuration file at the root of your project.

module.exports = {
  darkMode: false,
  plugins: [],
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
};

It will also create a postcss.config.js file that includes tailwindcss and autoprefixer.

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
};

To enable just-in-time mode, set the mode option to 'jit' in your tailwind.config.js file.

module.exports = {
  darkMode: false,
  mode: 'jit', // <-- add this line
  plugins: [],
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
};

Since JIT mode generates CSS on-demand by scanning your template files, it is crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise your CSS will be empty.

module.exports = {
  darkMode: false,
  mode: 'jit',
  plugins: [],
  // These paths are just examples, replace them to match your project structure
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
};

Create a global css file styles/main.css file and use the tailwind directive to include Tailwind's base, components, and utilities styles.

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

Finally, ensure your CSS file is being imported in your pages/_app.tsx component.

import type { AppProps } from 'next/app';
// Styles
import '../styles/main.css';

const CustomApp: React.ComponentType<AppProps> = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default CustomApp;

Now when you run yarn next dev, Tailwind CSS will be ready to be used in your Next.js project. If you would like to deep dive more into just-in-time mode, you can read its official documentation here.