HOW TO CONFIGURE TAILWIND CSS IN A REACT PROJECT
Tags: react
Published: 2022-10-19 10:56:13

## Let's start by defining what tailwind CSS is;

A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

To configure tailwind CSS in a  react project, first, we need to visit the tailwind CSS website https://tailwindcss.com/ and click the get started button.

For the option of installation click Framework Guides.

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

then click on Create React App

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

After creating your react project, you need to go to step two which is installing tailwind CSS using VS Code terminal.


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

Make sure you cd into your react project before you start installing tailwind CSS.

Once you have cd into your project folder, copy past the command 
npm, install -D tailwindcss postcss autoprefixer on the terminal and click enter to start installing.


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

After you're through with installing, copy the other copy-paste command npx tailwindcss init -p on the terminal which will create 
tow files on your react project.


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


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

The next step is to configure your template paths, first, we need to clear everything on the tailwind.config.js file.


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

After clearing the content inside the tailwind.config.js file, copy and paste content from https://tailwindcss.com/docs/guides/create-react-app tailwind.config.js  to your tailwind. config .js file.


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


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

The next step is to add tailwind directives to your CSS, so here we are going to copy-paste content on step four into our index.css file.


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

Click on the project's index.css file, paste the content, and save the file.


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

Let's finalize this by testing if our tailwind CSS is working, first, we go into the App.js file and remove the header.


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

After Removing the Header, replace the App class with a class from tailwind CSS like **bg-red-500**.


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


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

So now we can test if the changes are affected by running npm start on the terminal. 


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



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

And from the browser, we can see we have successfully installed and configured tailwind CSS in our application.

## **In conclusion let's see the importance of using tailwind CSS**

Tailwind CSS basically makes it quicker to write and maintain the code of your application. By using this utility-first framework, you don't have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application.