How to Setup & Use Tailwind CSS With Next.JS

What is Next.js?

Next.js is one of the leading JavaScript frameworks built on top of React.js by the creator of Vercel. It offers functionalities such as Server Side Rendering (SSR), Static Site Generation (SSG), image optimization, fast refresh, and more.

The combination of Next.js and Tailwind CSS will enable you to build a performant, modern, easy-to-maintain, and scalable full-stack project.

In the next sections, we'll take a look at various methods of how to set up a Next.js project with Tailwind CSS.

Setting up Next.js and Tailwind CSS using the with-tailwind-css template

The easiest way to set up a Next.js project with Tailwind CSS configuration is by using the official Next js Tailwind CSS example template named with-tailwind-css.

This is a public repository on GitHub, maintained by the Next.js team, and can be used as a starter kit for a new Next.js project. The advantage of using this method is that it's fast and error-free, and it follows the best practices of setting up Tailwind CSS in Next.js.

Run the command below to setup a new Next.js project using the with-tailwind-css template:

npx create-next-app --example with-tailwindcss my-app-with-tailwind

The command above will install a new Next.js app named my-app-with-tailwind with Tailwind CSS already installed.

Wait for the installation to complete and navigate to the newly created directory from your terminal:

cd my-app-with-tailwind

Then, run the command below to start your development server.

Using npm:

npm run dev

Or yarn:

yarn dev

Visit the localhost port, which your Next.js app is running on your browser. Your app should look something like the below:

When you open your project in your favorite editor VScode, you'll observe the project contains Tailwind CSS setup files and the index.js file you see on the browser is designed using Tailwind CSS. With this, you do not require any additional setup to start working with Tailwind CSS in your project.

This method only works best with a fresh Next.js project, the next section will outline the steps to set up a Next.js app and manually set up Tailwind CSS for it.

Setting up a new Next.js project

You can skip this section if you're installing Tailwind CSS in an existing Next.js app.

Getting started with Next.js is quite easy. You can set it up automatically by using the create-next-app command or manually by installing the next, react, and react-dom dependencies.

It is recommended to set up a Next.js app using the create-next-app command as it is stable and automatically sets up everything for you.

Run the command below to install the latest Next.js app with the create-next-app command:

npx create-next-app@latest

If you prefer yarn, then use the command below:

yarn create next-app

The command above will prompt you to create a name for your project and asks you to configure your project as demonstrated below:

After providing the required information and configurations, wait for the installation to end and navigate into the newly created directory (your app name) using the command below:

cd my-app

Run any of the commands below to start your server on the available port on your system.

Using npm

npm run dev

or yarn

yarn dev

If you visit the localhost port, your app will run on your browser, your app should display something like this:

In this section, we set up a new Next.js project using the create-next-app@latest command. The next sections will cover how to install and configure Tailwind CSS in your Next.js project.

Installing Tailwind CSS

The guide to installing Tailwind CSS in this section applies to both new and existing Next.js projects.

Follow the four (4) steps below to install and set up Tailwind CSS in your Next.js Project.

Step 1: Install tailwindcss, postcss, and autoprefixer with the command below:

npm install -D tailwindcss postcss autoprefixer

These three (3) packages are the required dependencies for using Tailwind CSS in any framework.

Step 2: Run the tailwindcss init command to generate both tailwind.config.js and postcss.config.js at the root of your project. These files are where we'll define our Tailwind configurations and plugins.

npx tailwindcss init -p

Step 3: Open your project in your preferred code editor (we are using Vscode) and specify the paths to all of your template files in the tailwind.config.js file.

The paths are where you'll be using Tailwind CSS in your Next.js project i.e where your JSX components will be located.

pages directory configuration:

If you're using the Next.js pages directory; your tailwind.config.js file configuration should look something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src directory configuration:

However, if you're using the src directory in your Next.js file your tailwind.config.js file should look something like this (check if your project has an src folder before the pages folder):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

app directory configuration:

If you're using the app directory; your tailwind.config.js file configuration should look something as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: The final step is to open the globals.css file located at the root of your project directory and add the @tailwind directives for each of Tailwind’s layers as shown below:

• @tailwind base;
• @tailwind components;
• @tailwind utilities;

To confirm that Tailwind is properly configured; apply any Tailwind utility classes such as text-red-900 or bg-red-900 in one of your existing components or update your index.js file we created together in this tutorial with the code below:

import Head from "next/head";
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className='flex justify-center items-center h-screen bg-white'>
<section>
<h3 className='font-bold text-xl mb-4'>
Tailwind CSS is installed successfully ✅
</h3>
<ul className='list-disc list-inside'>
<li>
<p className='inline'>
If you cannot see this walking cat
<span className='hidden'>🐈</span>
</p>
</li>
        &lt;li&gt;
          &lt;p className=&#39;inline text-red-800&#39;&gt;If this is red in color&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;p className=&#39;inline bg-blue-800 text-white&#39;&gt;
            If this has a blue background color
          &lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
  &lt;/main&gt;
&lt;/&gt;

);
}

Your browser should reflect the utility class you've added to your existing component or the browser will look something like this for the index.js file:

Wrapping up

This article provides steps to set up a Tailwind CSS in your existing or fresh Next.js project using the with-tailwind-css template; a Next.js Tailwind starter, or manually setting it up yourself.
We hope you understood how Tailwind CSS configuration works in Next.js and this article will help you to set up Tailwind CSS in your next Next.js projects.