Config Tailwind CSS in React JS project in TL;DR way 
Tags: react, javascript, tutorial, showdev
Published: 2020-05-01 20:58:53

TL;DR
Link to the React, Tailwind GitHub template [https://github.com/Rohithgilla12/react-tailwind-template](https://github.com/Rohithgilla12/react-tailwind-template).
Live [link ](https://react-tailwind-template.netlify.app/).

In this post, we will be glancing over following
- Config Steps
- Easy way
- Adding custom colours to the tailwind config file.

As I mentioned in my previous [article](https://dev.to/gillarohith/i-replicated-youtube-design-using-tailwind-css-dmc) that we will discuss more on how to config `react` and `tailwind` project here we go.

This article is inspired by the following [link](https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/).

## Config Steps
- As done by many `react` projects, creating it using `create-react-app`.
```bash
npx create-react-app react-tailwind-template && cd react-tailwind-template
```
- Add `tailwind`,`postcss-cli`,`autoprefixer` as `dev` dependecies.

_Note: I will be using `yarn` as a package manager, you can also use `npm`._

```bash
yarn add tailwindcss postcss-cli autoprefixer -D
```

- Now the following command initialises tailwind with its default config.
```bash
npx tailwind init tailwind.js --full
```

- We then config the `postcss` with the help of `autoprefixer`.
Create a new file and name it `postcss.config.js`, add following code to the created file.
```js
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};
```


- Okay I configured tailwind now what? 
Now, we add all the utility classes to our application by adding the following snippet into `src/assets/tailwind.css` file. Create the file if it doesn't exist.

```css
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

```

- Wohoo, am I good to go?
Well not yet. You need to change your `scripts` in `package.json` in the following way.

```json
  "scripts": {
    "start": "yarn run watch:css && react-scripts start",
    "build": "yarn run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  }
```

- This is the final step
Yes, you read it right. Just add the following import in `index.js`.
```js
import './assets/main.css'
```

`Et Voila!` now you can use `tailwind` utility classes in your web application.

## Easy way
Well, as I always do. I created a `GitHub template` for the whole process, using which with just a click you can do the entire process.
[Template](https://github.com/Rohithgilla12/react-tailwind-template).

![Template Button](https://dev-to-uploads.s3.amazonaws.com/i/sfpxaldqp2tore2bxwa5.png)

## Adding custom colours to the tailwind config file
Coming back to where it started, the youtube redesign, I wanted the colours to look the same, but in config file generated by tailwind we don't have them. Also by adding custom colour in the `config` file the utility classes for them are also generated.

You can add custom things in the following process. Open the `tailwind.js` file and inside the `theme` key add this
```javascript
yt: {
        body: "#181818",
        nav: "#202020",
        textBox: "#737373",
        insideBox: "#121212",
        searchButton: "#313131",
        icon: "#909090",
        hoverColor: "#383838",
      }
```

Now, we can use them in any components. For example like this
```html
<div className="bg-yt-nav h-16 block shadow-none">
 I am NavBar
</div>
```

Peace ✌🏻
Rohith Gilla.