Tailwind JIT with Next.js

Last updated 22 October 2021

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:

  • Lightning fast build times.
  • Every variant is enabled out of the box.
  • Generate arbitrary styles without writing custom CSS.
  • Your CSS is identical in development and production.
  • Better browser performance in development.
  • In this tutorial, I would like to demonstrate how to use Tailwind JIT with Next.js.

    Creating your project

    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

    Setting up Tailwind CSS

    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: {},
      },
    };

    Enable JIT mode

    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: {},
      },
    };

    Include Tailwind in your CSS

    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.