How to use Tailwind CSS in Next.js
Tags: nextjs, tailwindcss, tutorial, frontend
Published: 2022-09-21 09:45:56

---
title: How to use Tailwind CSS in Next.js
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["nextjs", "tailwindcss", "tutorial", "frontend"]
canonical_url: https://www.devwares.com/blog//tailwind-css-in-nextjs/
---

Tailwind CSS is a CSS framework that can be included in any of your projects. You can include Tailwind css in Next.js projects or react projects or any work you might be working with.

Tailwind CSS is not like other CSS frameworks like bootstrap, material, etc., in the sense that it is based on utility-first.

This means it doesn’t focus on pre-designed components like buttons, cards, etc. It’s a low-level utility class that allows you to build a custom website from scratch without leaving your HTML file.

In this tailwind CSS tutorial, we will look at how to include Tailwind CSS in Next.js project.

## Table of content

- Setting the Next.js
- Install Tailwind CSS
- Setting up the config files
- Purging of Tailwind
- Including Tailwind in your Application/How do I import a Tailwind CSS in Next.js
- Conclusion

## Setting the Next.js

In adding tailwind CSS in next.js we need to set up the next.js application first. If you already set it up, you can skip this step. If not, you should follow this step to set it up.

It is also worth noting that in order to continue this tailwind CSS tutorial you need to be running next.js version 10 or later.

Run the following command on your favorite terminal for you to set up your next.js

**Code:**

```
npx create-next-app Building-tailwind-app

```

You can call your application any name you want. In the command, we called our application “Building-tailwind-app”.

if we are to continue we need to go to the root of our application. We can do this by running the following command on our terminal.

**Code:**

```

cd Building-tailwind-app

```

## Install Tailwind CSS

To make use of the tailwind CSS framework you need three important packages. Tailwind, postcss, and autoprefixer.

We are going to install these three packages here. You can use npm by running this command on the terminal.

**Code:**

```

npm install –D tailwindcss@latest postcss@latest autoprefixer@latest

```

Or using yarn

```

yarn add –D tailwindcss@latest postcss@latest autoprefixer@latest.

```

## Setting up the config files

The next thing we need to do is to set up the config files, one for tailwind while the other one for Postcss.

A PostCSS is a tool for transforming CSS with JavaScript. In order to create these files at the root of our application, all we have to do is to run the following command on our terminal.

**Code:**

```
npx tailwind init –p

```

just like that, the `tailwind.config.js` and `postcss.config.js` will be added to the root of our application.

## Purging of Tailwind

To purge tailwind CSS means to remove all the classes in your HTML that were not used. This allows for the faster loading of your applications.

In order to purge the Tailwind styles. You should update your tailwind.config.js you created with the following codes

**Code:**

```

Module.exports = {
Purge: [‘./pages/**/*.{js,ts,jxs,tax}’]
darkMode : false,
theme : {
           extend : { },
},
Variants : {
      extend: { },
},
plugins: []
}

```

In the code above, we are instructing Tailwind to look at our page folder for styles we used.

This will also cover both JS and TypeScript files. it is always wise to apply the PugeCSS to only the tailwind CSS’s utility, not to the base styles or component classes. this is to ensure you don’t accidentally purge important base styles when working on your Next.js project.

## Including Tailwind in your Application / How do i import a Tailwind CSS in Next.js

Now what is left is to include Tailwind CSS in Next.js application. In order to do this, you simply update /pages/-app.js with the following codes.

**Code:**

```

Import "tailwindcss/tailwind.css"

Function myApp({ Component, pageProps }) {
Return <Component {…pageProps } />
}

Export default MyApp

```

Now, you would want to remove the styling in your `/pages/index.js` applications. What is left now is to build the Next.js application. As you can see it’s easy to include Tailwind CSS in Next.js application.

## Conclusion

In today’s Tailwind CSS tutorial, we explained how to Import Tailwind CSS to our Next.js project or applications. We also went through step by step the process of including Tailwind CSS to Next.js projects. I hope you enjoyed the tutorial.


## Resources


- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)