DEV Community

Cover image for How to setup Tailwind CSS jit with NextJS
Dev Sharma
Dev Sharma

Posted on • Originally published at blog.devsharma.live

How to setup Tailwind CSS jit with NextJS

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: [],
};
Enter fullscreen mode Exit fullscreen mode
  1. postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

πŸŽ‰πŸŽ‰πŸŽ‰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
Enter fullscreen mode Exit fullscreen mode

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.


Refs & Resources

Tailwind Docs

Next Tailwind

Tailwind JIT Compiler

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

Top comments (0)