Building next.js app with next-auth and Prisma.js on top Postgres. Part 3. Tailwind

Hello there! This is third part of tutorial on how to build fullstack project on nextjs. In first part we did project's kick off and second part was about plug in authentication part via NextAuth. Let's continue!

Adding tailwindcss to the project

Recently I was a fan of css-in-js approach and I'm still there. But I just tried a tailwind's utility-first approach on handling my apps styles and it feel much more better and robust for me. So I decided to stick with for a time.

Sidenote. Process of tailwind's integration into nextjs project is quite simple and well explained in official docs. But I'll leave some notes here just for myself to have a reference to reach to next time.

First let's install necessary packages:

copied bash

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Next we have to kickoff tailwind's initial configuration in our project:

copied bash

npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js. They are good in their default state at the beginning so leave them like they are and continue. We will add some features there later.

Last step before start using tailwind's utilities is to connect tailwind styles to our application. I prefer to stick with tailwind css directives option here. Extend your ./src/styles/globals.css via putting core tailwind's directives on top of the file:

copied css

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

Vscode will not understand those directives but do not pay attention to it. Everything should start work magically. P.S. I don't like magic in my code but at the moment of writing these notes I didn't have time to investigate how nextjs guess how to resolve those directives, because no explicit plugins were mentioned anywhere and it just works. Witchcraft. I'll return to it later ;)

One thing to put here right away is that we have to improve tailwind.config.js a bit to purge unnecessary styles on production out of bundle. Let's do it:

copied javascript

module.exports = {
  ...
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
  ...
}

Now when we import our ./src/styles/globals.css into project we'll be able to use amazing tailwind's utilities classes in our react components:

copied jsx

const BaseLayout = ({ children }) => {
  return (
    <div className="flex h-full flex-col items-center justify-center bg-main">
      <div className="m-auto rounded-3xl bg-white w-90 h-90 md:size-767 shadow overflow-hidden">
        {children}
      </div>
    </div>
  );
};

export default BaseLayout;