How to use Tailwind CSS with a React App
Tags: react, tailwindcss, javascript, tutorial
Published: 2022-03-09 13:19:54

## What is Tailwind CSS?

Tailwind is a modern CSS framework. It is a utility-first-based framework and provides you with a unique set of utility classes which makes the development process very easy and results in making a unique design. Utility-first CSS is fast, robust, and very efficient making your coding hassle-free. Tailwind CSS is also not opinionated; it means you are totally free to customize the design lament and website's component.

Tailwind is a power pack of everything you need to create a website without writing any custom CSS. The main difference between Tailwind and its competitors is that it gives developers complete control over the styling of a web application.

## Why Use Tailwind CSS?

There’s a lot that goes on in web development. It can sometimes, thus, become an overly complicated task. Mapping the impact of styling might become tedious and time-consuming hampering the progress of the application/website.

Implementing Tailwind CSS will eliminate all the above-mentioned issues. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code. Custom styling can be provided to the components with the help of this framework.

## Tailwind CSS: Pros and Cons
### Tailwind CSS: Advantages

1. Control Over Styling
2. Faster CSS Styling Process
3. Responsiveness and Security
4. Additional Features

### Tailwind CSS: Disadvantages

1. Styling and HTML are Mixed
2. It Takes Time to Learn
3. Lack of Important Components
4. Documentation

In this blog, we’ll demonstrate how to make Tailwind CSS work inside your React project without having to eject Create React App.

## Using Tailwind CSS in your React App
First, open your terminal and type the following commands to create a new project.
```
#using NPX
npx create-react-app tailwindreact-app

#using NPM
npm init react-app tailwindreact-app

#using yarn 
yarn create react-app tailwindreact-app
```
create-react-app is the official React build tool for scaffolding new React projects. It leverages webpack and babel and reduces the hassle of configuring and setting up the build processes for projects, allowing you to focus on writing the code that powers your app.

Next, install Tailwind and its dependencies:
```
cd tailwindreact-app

npm install tailwindcss postcss-cli autoprefixer -D
```
We need to initialize Tailwind CSS by creating the default configurations. Type the command below in your terminal:
```
npx tailwind init tailwind.config.js --full
```
This command creates a tailwind.config.js in your project’s base directory; the file contains the configuration, such as our colors, themes, media queries, and so on. It’s a useful file that helps with predefined sets of properties which will aid the need to re-brand certain conventions or properties if the need arises.

Now update tailwind.config.js:
```
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
}
```

## How To Configure PostCSS?
The PostCSS documentation states that:

“PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.”

## Why Autoprefixer?
It’s necessary to install Autoprefixer alongside Tailwind CSS because Autoprefixer usually tracks caniuse.com to see which CSS properties need to be prefixed. Hence, Tailwind CSS does not provide any vendor prefixes. If you’re curious as a cat in regards to PostCSS navigates to their documentation.

Create a PostCSS configuration file in your base directory manually or using the command:
```
touch postcss.config.js
```
Add the following lines of code to your PostCSS file:
```
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ],
};
```
Because PostCSS is necessary to lint our CSS, hence this configuration.

## Update scripts in package.json
Now navigate to your package.json file in your root directory and replace the "scripts" with the following:
```
"scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},
```

## Create your styles folder
Create a folder named **styles** inside of your src folder. This is where all your styles would be stored.

Inside the styles folder, create a **tailwind.css** and an **index.css** file.
```
/* src/styles/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Import main.css
You should delete the **index.css** and **app.css** files in your project root directory and remove the import statements in both the **Index.js** and **App.js** files respectively.

Now you are ready to import tailwind into your **index.js** file:
```
import './styles/main.css';
```
Now in your **app.js** file go ahead and add the following code:
```
<div className="text-red-500">
     TechvBlogs
</div>
```
Now It's time to run our project:
```
npm run start
```
**Thank you** for reading this blog.