There's no doubt that Next.js is awesome, SSR makes your application's load times crazy fast, and if you add Tailwind to the formula chances are that you will be building good-looking performing applications effortlessly.

For those who don't known, TailwindCSS is a utility-first framework packed with CSS classes that can be composed to build any design.

In other words, they give you a lot of CSS classes that you can use to design your app (which is enough to get you started with the layout), while also allowing you to rapidly change the styles of your app from a config file.

In addition, Tailwind can remove all CSS classes that are not being used, resulting in tiny bundle size.

Tailwind is awesome, believe me. You don't know how useful it is until you try it.

Lets dive into it

Installation

We start by installing TailwindCSS, PostCSS and Autoprefixer.
In case you are wondering:

• “PostCSS is a tool for transforming CSS with JavaScript”
• “Autoprefixer is a PostCSS plugin to add vendor prefixes to some CSS rules”

To install all these packages at once, just run the following line on your Terminal

$ npm i -D tailwindcss postcss-import autoprefixer

Installation was easy, what about the config?

We need to add a Tailwind config file and for that we can use Tailwind's cli.

This will create a file called tailwind.config.js on your project's root folder.

$ npx tailwind init

Ok, now we need to create 2 files more:

• postcss.config.js on the root of your project
• tailwind.css on your styles folder (Generally /styles)

// my-nextjs-project/postcss.config.js
module.exports = {
  plugins: ["postcss-import", "tailwindcss", "autoprefixer"],
};

/* my-nextjs-project/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

And finally, we just need to import our new stylesheet on /pages/_app.js to have all Tailwind css classes available to us globally.

import "../styles/globals.css";
import "../styles/tailwind.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Thats it! 🎉

It wasn's that hard, wasn't it?
Now you can start adding Tailwind CSS clases to your html.

Head to TailwindCSS for more information about what classes are available to you.

Additional recommendations

Must-have extension: Tailwind CSS IntelliSense

If you are using VSCode, Tailwind CSS IntelliSense is a must-have. Really. It will make your life S O M U C H E A S I E R.

Here is a list of things that this extension adds:

• It enables auto-completion whenever you are working with css classes
• Highlights potential bugs on your HTML and CSS
• Displays what CSS rules Tailwind is applying when hovering on any Tailwind class

A very useful helper: Classnames

Since we are going to be using a lot of CSS's classes it might be a good idea to install classnames, which is a small helper library to concatenate class names.

$ npm i --save classnames
$ npm i -D @types/classnames # if you are using Typescript

Its usage is very simple

import classnames from "classnames";

export function MyComponent(props) {
  return (
    <div className={classNames(props.className, "flex", "flex-col", "min-h-screen")}>
      <p>...</p>
    </div>
  );
}