How to setup Tailwind CSS jit with NextJS

The JAMStack

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

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.

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

1. 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

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.

---

Refs & Resources

Tailwind Docs

Next Tailwind

Tailwind JIT Compiler

If you loved the article and would like to support me, you can buymeacoffee!