React and Tailwind CSS Setup
Tags: javascript, react, tailwindcss, beginners
Published: 2020-03-24 10:37:53

Hi everyone, I'm Filip and I am a JavaScript developer. This is my first blog post. Hope you like it and I would love to hear what you think of this post and how I can improve my writing in the future.

## What we need

- Terminal / Command Line (e.g. PowerShell on Windows, Zsh on Linux)
- IDE (e.g. VS Code)
- NodeJS - 8.11.3+
- npm - 6.12.1+

## 1. Getting started

First we will install the `npx` package globally. This package allows us to execute packages from npm without installing them. When we run this command it downloads the package, executes it and deletes it. We will install it with the following command:

```bash
npm i npx -g
```

Now we will create a starter React app using the `create-react-app` package with the following command:

```bash
npx create-react-app my-react-app
```

This will create a React app in a folder named `my-react-app` ( the name is given in the command above ). Now we will change into the directory and install some packages that we need. For now we will need `react-router-dom` ( for navigating in the app ), `tailwindcss` ( for Tailwind ), `autoprefixer` ( for prefixing CSS for different browsers ) and `postcss-cli` ( for watching and reloading CSS updates ). We can do this with the following commands:

```bash
cd my-react-app
yarn add react-router-dom tailwindcss autoprefixer postcss-cli
```

If you want to see the initial app created so far you can run the following command:

```bash
yarn start
```

The app will be started on `localhost:3000` and will display the standard new React App screen.

## 2. Setting Up Tailwind & PostCSS

Now we will set up the configurations for Tailwind and PostCSS. First we will initialize Tailwind into our project. We can do this by running the following command:

```bash
npx tailwindcss init
```

This will create a file called `tailwind.config.js` with an empty configuration for Tailwind. We can customize this as we want but for now we will leave it as is. Next we will set up the PostCSS config. Fot this we will create the config file manually. You can do this with the following command:

```bash
touch postcss.config.js
```

This will create a file called `postcss.config.js` . Now we can add the configuration for PostCSS in this file. You can copy and paste the following configuration in the file:

```js
const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
      tailwindcss("./tailwind.config.js"),
      require("autoprefixer")
  ]
};
```

Now we can create a global styles file that will import Tailwind in our app. I recommend in the `src` folder that we create a folder called `styles` that will hold all the global styles that we need. In this folder we can create a file called `tailwind.css` or `global.css` ( besides tailwind in this file we can add some custom global overrides ). To use Tailwind all we have to do is put the following in the CSS file that we created:

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

/* All other CSS will go here */
```

## 3. Connecting Tailwind, PostCSS, & React

Now we need to modify the starting scripts for the project that are defined in the `package.json` file. When we open the file if should look like this:

```json
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "autoprefixer": "^9.7.5",
    "postcss-cli": "^7.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "tailwindcss": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

We will modify the scripts part of the file with the following commands:

```json
"scripts": {
    "start": "npm run watch: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/global.css -o src/styles/main.css",
    "watch:css": "postcss src/styles/global.css -o src/styles/main.css"
}
```

Now we just need to import the CSS file that will be created when the app is built into `index.js` ( root of the app ) and we can start using Tailwind in our app. To do this just replace `import './index.css';` with `import './styles/main.css';` .

And that is it. Now we can start making beautiful React apps with Tailwind. For more info on how to use Tailwind I recommend the [Tailwind documentation](https://tailwindcss.com/docs) , it is very clear and has lots of examples.

The code for this tutorial can be found [here](https://github.com/filipjanevski/react-tailwind-starter).

Happy coding.