# Setup Tailwind CSS with React

In this article, I'll be showing you how to setup Tailwind CSS with React so you can build highly customizable UIs in React with a utility based approach.

## Create React Application
Firstly, we will use `create-react-app` to setup a react app. To do this, run the following command in your terminal substituting in the name of your application:

```
npx create-react-app appName
```
> Obviously, you will need npm installed. You can install it by installing [node.js](https://nodejs.org/en/)

## Install Tailwind
Next, we will install tailwind and its peer-dependencies in order to work with our react app. 

```
npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```
> Remember the `-D` flag since these are dev dependencies

## Install Craco
To be able to configure Tailwind in with create-react-app, we will need another package called `craco`.

```
npm install @craco/craco
```

After installing craco, we will update our `scripts` in our `package.json` from the default `react-scripts` to `craco`.  The default `scripts` should go from this:

```
 // package.json
 {
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
  }
```

to this:

```
 // package.json
 {
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    },
  }
```

> Note: don't change the eject script to craco

## Configure Craco

Next, we will create a `craco.config.js` file at the root of our project so we can add previously installed PostCSS plugins:

```
// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}
```

## TailwindCSS Config File

Next, we will need to generate a `tailwind.config.js` file using `tailwindcss-cli`. To do this we can run the following command in the terminal:

```
npx tailwindcss-cli@latest init
```

This will create a base `tailwind.config.js` file that looks like this:

```
// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

We can then update the `purge` property so that unused styles are removed in production:

```
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
```

This file is used to customize the theme, which allows you to change sizes, colors and more about your styling. You can learn more about customizing the theme and variants in [Tailwind's documentation](https://tailwindcss.com/docs/theme).

## Add Tailwind To Our CSS

In our `index.css` in the `./src` directory that is automatically generated by Create React App, we can use the `@tailwind` directive to include the `base`, `components` and `utilities` styles.

> Remember to remove the original contents in this file.

The `./src/index.css` file should now look like this:

```
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## We're Done
Ensure that the `index.css` file is imported in the `index.js` file and you are ready to begin using Tailwind CSS in your application. You can now run `npm start` and you're ready to go!

Remember to check out the [official documentation](https://tailwindcss.com/docs) of Tailwind CSS if you're learning to see all styles you can use in your application as well as how to customize the theme and variants, e.t.c

👌 Thanks for reading this article! 

If you like what I do and would love to see more related content, follow me on my other social platforms:

**GitHub:** [Blake-K-Yeboah](https://github.com/Blake-K-Yeboah)

**LinkedIn:** [Blake-K-Yeboah](https://www.linkedin.com/in/blake-yeboah/)

You can also show your support by buying me a coffee 😃
 
<a href="https://www.buymeacoffee.com/blakeyeboah"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=blakeyeboah&button_colour=855ff6&font_colour=ffffff&font_family=Cookie&outline_colour=ffffff&coffee_colour=FFDD00"></a>