How to install tailwind CSS on a next JS project : a step by step guide
Tags: webdev, beginners, tailwindcss, css
Published: 2023-06-16 07:41:51

Table of Contents:

Introduction
Prerequisites
Setting up a Next.js Project
What is tailwind CSS
Benefits of using tailwind CSS
Installing Tailwind CSS
1. Using npm
2. Using Yarn
Setting up Tailwind CSS Styles
Testing Tailwind CSS Setup
Conclusion

## Introduction
Visually appealing websites are essential in the current digital era. Beautiful web page design greatly benefits from the use of cascading style sheets (CSS). The installation of Tailwind CSS on a Next.js project will be explained to you in this article as a layperson. In order to quickly create cutting-edge user interfaces, you can use the well-liked utility-first CSS framework Tailwind CSS.

## Prerequisites
In order to Participate in the Tutorial part of this, it is recommended that you have
A Fundamental understanding of Basic Html, CSS, and JavaScript .
Node installed on your System.
Basic Knowledge of react.js.
It will also be useful to be familiar with package managers like npm or yarn and Next.js.

##Setting up a Next.js Project
I won't discuss preparing for the next.js You can read my other article to learn how to set up a next, but I'll focus on a next.js project here. An example of a next.js project is available at https://dev.to/lordsage/learning-nextjs-layout-creation-a-step-by-step-guide-579m

## What is tailwind CSS

Tailwind is a CSS framework that provides us with single-purpose utility classes which are opinionated for the most part, and which help us design our web pages from right inside our markup or . js/. jsx/. ts/. tsx files. OR you can say that  tailwind CSS is 

A well-liked utility-first CSS framework called Tailwind CSS aids programmers in swiftly and effectively creating user interfaces. To put it simply, it gives you a collection of already-made CSS classes that you can use to design your HTML components.

## Benefits of using tailwind CSS
- Easy to Get Started
- Faster Development
- Customizable
- Reduces code small

## Installing Tailwind CSS Using npm

Launch the terminal in the vs-code project directory.

If you are Running npm, to install Tailwind CSS and its dependencies type this on the terminal "npm Install -D postfixer for tailwindcss".

then run the init command to generate both tailwind.config.js and postcss.config.js

``` javascript
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

```



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmfgd3cvrprywtbyqmcj.png)

On the other hand, if you like working with Yarn type this
: yarn add tailwindcss postcss autoprefixer

```javascript
yarn add tailwindcss postcss autoprefixer

npx tailwindcss init -p

```
##Setting up Tailwind CSS 
after installing the tailwind css  there are many configuration that are still needed  for it to ran smoothly  
first of all Open the tailwind.config.js file in your project directory. Locate the purge property and update it with the paths to your Next.js components and pages

```css
module.exports = {
  purge: ['./src/components/**/*.{js,ts,jsx,tsx}', './src/pages/**/*.{js,ts,jsx,tsx}'],
  // ...
}

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcpz5d78mooi6836wm13.png)


after you have done that next import the tailwind css style into the project
Open the styles/globals.css file in your project folder

```css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxvg7b00tu13eo84vgau.png)


Once you have done that and saved you file you will have to test if it is working so what you have to do is to go your "index.js file" give the div class name and in the class name add this "bg-blue-500" to give background color of blue

```react
import React from 'react';

export default function Home() {
  return (
    <div className="bg-blue-500 ">
   <h1>Welcome to my Next.js project with Tailwind CSS!</h1>
    </div>
  );
}

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csrbhm84jx0diovmpdqz.png)

and another thing there an more straight forward way of when you are installing next js  you will see where you are allowed to to select if are going to work with tailwind css so that the system can install it automatically for you instead of manually installing it  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybp14tunojir209u1uh2.png)

Conclusion
best of luck! Tailwind CSS has been successfully installed Next.js work. You can now use Tailwind CSS to build amazing and responsive designs for your websites by following the instructions in this article. Explore the official Tailwind Css site for more https://tailwindcss.com/  and for beginners  search for tailwind cheat-sheet "" this will help you in using tailwind css feel free to comment