How to use Tailwind CSS in Nextjs
Tags: tailwindcss, webdev, programming, react
Published: 2021-10-10 00:55:11

---
title: How to use Tailwind CSS in Nextjs
published: true
date: 2021-01-10 01:16:04 UTC
tags: [tailwindcss, webdev, programming, react]
canonical_url: https://www.devwares.com/blog//tailwind-css-in-nextjs
cover_image: https://www.devwares.com/blog/images/tailwind-css-in-next-js.png
---

Tailwind CSS is a CSS framework that can be included in any of your projects.

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 Nextjs project.

## Table of content

- Setting the Next.js 
- Install Tailwind CSS
- Setting up the config files
- Purging of Tailwind
- Including Tailwind in your Application 
- Conclusion


## Setting the Next.js 

To set up a nextjs project is easy. Although we have to set this up before we go ahead to install our Tailwind CSS to the technology. To set up your nextjs project all you have to do is simply write the following commands on your terminal 

```bash
npx create-next-app -e with-tailwindcss my-project
cd my-project
```
## Install Tailwind CSS
once the nextjs application is running you can go ahead to add Tailwind CSS. You can do this by running the following code on your terminal 
```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
This will install tailwind CSS and its dependencies.

## Setting up the config files
At this point we have installed our Tailwind CSS but in order to use it we need to include our configuration files. We can do this by running the following command on our terminal

```bash 
npx tailwindcss init -p
```
This command will create the `tailwind.config.js` and `posts.config.js` files. This files are important in configuring our Tailwind CSS properly.

## Purging of Tailwind
Now, that we have installed our Tailwind CSS to our nextjs project. There are a few things we need to complete in our Configuration file in order to be set. You can go ahead and open the `tailwind.config.js` file now. In our configuration file we are going to purge for our Next.js file. 
If you are using the Tailwind version 2 you can change the configuration file to the ones below.

```javascript
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
```
while those that are using the version 3 can change theirs to look like the configuration below.

```javascript
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
```

## Including Tailwind in your Application 
We can now include Tailwind to our global CSS file on Nextjs application. These can be done by simply creating a CSS file on the Nextjs application and add the following code to the file.

```css
@tailwind base; 
@tailwind components; 
@tailwind utilities;
```
Also make sure to import this Global CSS file you created is imported into the `App.js` file.
With this you are ready to start using Tailwind CSS on your Nextjs file.
Happy coding.

## Design and code tailwind CSS websites 3x faster

We created a tool to visually build tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [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 use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)
- [Tailwind CSS Colors 3.0](https://www.devwares.com/blog/How-to-add-color-to-Tailwind/)

- [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/)