How to add Tailwind CSS to a Next.js application

Hey, if you are looking for a CSS framework that gives you the ability to fully customize your prototype or web app components, you should definitely try tailwindcss.

In this article I will teach you how to install and setup tailwindcss in Next.js.

Introducing the frameworks.

If you're not familiar with these frameworks,

Tailwindcss: Is a utility first CSS framework that helps you to rapidly build nice user interfaces using easy to remember class names.

Next.js: Is a react based JavaScript framework for building modern applications. Next.js adds to react server-side rendering(SSR), static site generation(SSG) and many other functionalities and is also search engine optimized.

Okay, so let's get into it.

Starting a new Next.js project.

Step 1: Create a new Next.js application.
To create a new next application, run the following code in your terminal. Note Next.js requires Node 12 and up.

npx create-next-app project-name

And navigate into your project directory using:

cd project-name

Steps 2: Install tailwindcss.
Once you are in the project directory, run the following code to install tailwindcss and its dependencies.

npm install -D tailwindcss postcss autoprefixer

After tailwind is successfully installed create the tailwind config file by running the following code.

npx tailwindcss init -p

The -p command creates a postcss config file in your project directory.

Your directory should now look like this with the two config files

Step 3: Configuring template paths.
By default all of tailwinds classes are added to your project, to make sure that only classes you have used in your project will be exported with your final code we will need to purge our CSS.

In your tailwind config file add the following code in the content property. The code tells tailwind where tailwind classes have been used.

"./pages/**/*.js"

The file path: the code tells tailwind to look inside the pages folder of the root directory ./pages/ for a .js file or any folder **/ with .js file *.js inside of it.

Note you can add an array of file paths in the content property.

Step 4: Add tailwindcss directives to global.css file.
To add tailwindcss directives navigate to global.css file in the styles folder and add the following code.

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

Creating a basic card with tailwind.

With all setup and ready let make a card to check if tailwind is properly installed.

In your index.js file, replace the content with the following code.

export default function Home() {
  return (
    <div className="w-1/2 mt-32 mx-auto  bg-blue-900 p-10">
      <p className="m-4 text-gray-200">
        Cillum consequat eiusmod adipisicing sint qui mollit. Ut et tempor nulla
        excepteur nulla incididunt qui exercitation incididunt. Sint ex
        adipisicing pariatur nulla ut ex laborum consequat enim. Et non tempor
        laborum irure commodo fugiat mollit nostrud adipisicing nostrud eiusmod
        do. Elit velit amet do enim esse ex ipsum velit. Quis consequat sunt
        dolore dolor commodo enim anim tempor ipsum.
      </p>
    </div>
  );
}

The code is a simple HTML code with a p tag inside a div and tailwind classes added for the styling.

Run npm run dev in your terminal and open localhost:3000 in your browser.

The result should look like the image below

Conclusion

If you have reached this part of the article without a problem, then tailwind is successfully installed in your project.

If you would love to learn tailwinds classes through video lessons like I did, checkout this youtube video from Scrimba.