How to setup Tailwind CSS in Next.js

In this lesson we will go over how to install and use Tailwind CSS in our Next.js Application. Tailwind CSS is considered to be a library of utility classes for CSS rather than building out components, although you can use it for that also. By using utility classes we can quickly compose and build out an awesome looking website in a short time.

Here is the link to the repo if you just want to dive into the code:

https://github.com/EntryLevelDeveloperTraining/nextjs-workshop

Installation

First we need to install Tailwind CSS by using NPM. We also need to install another library to compile our CSS to be able to use it with Next.js.

npm i tailwindcss postcss-preset-env

This will install the correct packages from NPM that we need to build, compile and use Tailwind CSS.

Compiling

Now we need to setup a few config files so Tailwind CSS can compile in our Next.js app. Let's first create a file called postcss.config.js in the root folder and add this JSON config object.

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
}

This will be enable our app to compile Tailwind CSS for our Next.js app.

Now we need to create a file called tailwind.config.js in the root folder and add this JSON config object.

module.exports = {
  purge: ['./pages/**/*.tsx', './styles/**/*.css'],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
};

There are quite a few options that we can configure, however to start out this will look at our files and when we build our Tailwind CSS it will remove any CSS that is not needed. I will link more about the config file in the links below.

Now that we have installed and compiled Tailwind CSS for our app we need to create a CSS file that will have our Tailwind CSS styles and any custom styles we have.

Styles

Let's create a folder in the root folder called styles and under that file create a file called index.css and add this default css.

@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

@layer components {
}

This will bring in all the Tailwind CSS styles so we can use them and create our own layers and components in our app. You can also see there is a section marked @layers components where you can compose your own styles derived from Tailwind CSS classes.

Include

Now that we have everything setup we need to include the css file in our main app component.

// pages/_app.js
import '../styles/index.css';

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

export default MyApp;

If you already have this file created then just add this line to the top of the file.

import '../styles/index.css';

Finished

Now you are finished and can start using Tailwind CSS in your Next.js application. Here is a code snippet on how to use it.

export default function Home() {
  return (
    <div className="flex justify-center items-center w-screen h-screen">
      <h1>Next.js Tailwind CSS Starter</h1>
    </div>
  );
}

You can easily style your HTML elements with easy to use utility classes that don't require a ton of configuration or component library to use. Have fun styling your app.