How to setup Tailwind CSS JIT with NextJS

How to setup Tailwind CSS JIT with NextJS

The next-gen Tailwind CSS setup

Listen to this article

The JAMStack

article meme.png

The latest addition to the Tailwind project is the its just-in-time compiler that generates your styles on-demand as you author your templates instead of generating everything in advance at the initial build time.

Here are the advantages that JIT offers:

  • Lightning fast build times
  • Every variant is enabled out of the box
  • Generate arbitrary styles without writing custom CSS (top[-10px])
  • Identical CSS in development and production
  • Better browser performance in development

Lets get Started

Create a next project.

npx create-next-app next-tailwind-tutorial
cd ./next-tailwind-tutorial

Next, let's install Tailwind dependencies and create a Tailwind config.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p

Sucessful tailwind init -p

A better folder structure

Now we need to modify these two files, but before that lets organize our folder structure

  • Create an src folder in the root directory
  • Move styles and pages folders inside it.

Folder Structure

  1. tailwind.config.js

    module.exports = {
    mode: "jit",
    purge: ["./src/**/*.{js,jsx,ts,tsx}"],
    darkMode: false, // or 'media' or 'class'
    theme: {
     extend: {},
    },
    variants: {
     extend: {},
    },
    plugins: [],
    };
    
  2. postcss.config.js

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

This will make our development run with Tailwind JIT and in production, it will run JIT one-off.

Now add the Tailwind directives to your

global.css

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

πŸŽ‰πŸŽ‰πŸŽ‰That's it and you are ready to use Tailwind in your next project.

Run the dev server and test out your app.

npm run dev

Next Home with Tailwind

Bonus

Tailwind CSS has a VS Code extension you can use to speed up development and boost productivity.

Also check out the Headwind extension, this tool automatically enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

Feel free to reach out to me on Twitter @cryptus_neoxys and connect with me on LinkedIn.


Refs & Resources

Tailwind Docs

Next Tailwind

Tailwind JIT Compiler

If you loved the article and would like to support me, you can buy me a coffee.

Β 
Share this