How to add Tailwind CSS to a Next.js application
Tags: tailwindcss, nextjs, tutorial, webdev
Published: 2022-08-27 00:29:00

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
 
![an image showing how your directory should look after taiwinds config has been initialized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xzdcr4e8t2145w6dnou.png)

**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"`


![inside tailwind config file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/megygcpvfp6moh7q55ea.png)

**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

![Image showing final page after successful installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt0xqgkat9r1fc3jtes4.png)

##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.

{% embed https://www.youtube.com/embed/4wGmylafgM4 %}