How to install React and Tailwind CSS for beginners
Tags: tailwindcss, react, css, tailwindcsstutorial
Published: 2021-03-13 17:51:30

---
title: How to install React and Tailwind CSS for beginners
published: true
date: 2021-03-10 12:23:28 UTC
tags: TailwindCSS,React,CSS,TailwindCSSTutorial
canonical_url: https://blog.iamsondre.net/how-to-install-react-and-tailwind-css-for-beginners
---

I will show you how to install Tailwind CSS and React locally in this step-by-step guide!

## Create a new project

Start by creating a new React project, by opening the terminal and run

```
npx create-react-app my-project

```

This usually takes a couple of minutes.

After the installation of your React project is complete, go ahead and cd over to your project folder in the terminal and run

```
cd my-project
npm start

```

You should now see this on http://localhost:3000

![react.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615373229771/e22YzXdaD.png)

### Delete items

We are now going to delete everything in the _src_ and _public_ folder except for _index.html,_ _App.js_, _index.css_, and _index.js_

Your project folder should look like this:

![crafolder.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615373379762/3gXQ5aO1v.png)

### Editing files

Go ahead and replace everything in your _index.html_ with this

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Tailwind Starter</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

```

Replace your _index.js_ with this

```
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

```

Open your _App.js_ and replace the code with

```
import React from "react";

function App() {
  return (
  <div>
    <h1 className="text-2xl text-red-900">Hello World!</h1>
  </div>
  )
}

export default App;

```

And the _index.css_

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

```

## Installing Tailwind CSS

Now it is time to install [Tailwind CSS](https://tailwindcss.com/) and its dependencies. We do this with npm. Inside your terminal run `npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9`This will install Tailwind, Post CSS 7 and Auto prefixer to your project.

## CRACO

> Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

We need to install CRACO, since Create React App won't let us override the PostCSS configuration.

So let's install CRACO with`npm i @craco/craco`

Open your _package.json_ and replace

```
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

```

with this

```
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

```

You now need to create a file named _craco.config.js_ in the root of your project. Copy and paste this inside

```
module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
      ],
    },
  },
}

```

## Tailwind configuration

Create your Tailwind CSS configuration file:`npx tailwindcss init`And replace everything in _tailwind.config.js_ with this:

```
  module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

```

This will purge the unused CSS in _public/index.html_ and any _.js_, _.jsx_, _.ts_, _.tsx_ files in any folders inside the src folder.

If you run `npm start` and your site looks like this, then everything is working as it should! ![HelloWorld.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615374297776/jtbRoIuXN.png)

Resources:
[Tailwind CSS](https://tailwindcss.com/)
[React](https://reactjs.org/)
[CRACO](https://www.npmjs.com/package/@craco/craco)