How to configure Create-React-App to use TailwindCSS
Tags: createreactapp, react, tutorial
Published: 2019-07-23 19:21:21

---
title: How to configure Create-React-App to use TailwindCSS
published: true
tags: create-react-app, react, tutorial 
canonical_url: https://blog.logrocket.com/create-react-app-and-tailwindcss/
---

![](https://thepracticaldev.s3.amazonaws.com/i/8mxegevn1yyaedca0d4d.png)

Recently, I tried using TailwindCSS in a React project bootstrapped by the [Create-React-App](https://facebook.github.io/create-react-app/) (CRA) boilerplate and ran into difficulties setting up [TailwindCSS](https://tailwindcss.com/) as CRA abstracts configuration. To make custom configurations, we would have to `eject` Create-React-App to have full access to tinker with the configurations, which also means a much more tedious setup and should anything break…you’re on your own. I tinkered with it a bit and found a better way to get it done.

In this post, I will be showing an easy way to make TailwindCSS work inside your react CRA project without having to eject Create-React-App.

This tutorial assumes basic knowledge of TailwindCSS and React JS.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Prerequisites:

  - Knowledge of how npm works
  - Have [Node.js 8.0](https://nodejs.org/en/download/) or higher and [npm 5.2 or higher](https://www.npmjs.com/get-npm) installed
  - Basic understanding of [React JS](https://reactjs.org) and [TailwindCSS](https://tailwindcss.com/docs)

## Getting started

First, open your terminal and type the following commands to create a new project.

```jsx
#Using NPM
$ npx create-react-app tailwindreact-app

#Using Yarn
$ yarn create react-app tailwindreact-app
```

This bootstraps a new react app with all the necessary configurations and build pipelines ([Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/)).

`cd` into your app directory.

```jsx
cd tailwindreact-app
```

Next, install Tailwind:

```jsx
# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev
```

Create the default configurations scaffold.

```jsx
npx tailwind init tailwind.js --full
```

This command creates a `tailwind.js` in your project’s base directory, the file houses all of Tailwind’s default configuration.

Install Autoprefixer and PostCSS-CLI like this:

```jsx
npm install postcss-cli autoprefixer --save-dev
or
yarn add postcss-cli autoprefixer --save-dev
```

As stated in the PostCSS [documentation](https://github.com/postcss/postcss):

_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._

While [Autoprefixer](https://github.com/postcss/autoprefixer) is a PostCSS plugin, it basically parses your CSS and adds/removes unnecessary vendor prefixes in your compiled CSS rules. It can help you add prefixes for animations, transition, transform, grid, flex, flexbox, etc.

## How to configure PostCSS

Create a PostCSS configuration file in your base directory manually or using the command:

```jsx
$ touch postcss.config.js
```

Add the following lines of code to your PostCSS file:

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

Inside your `src` folder create a folder, name it `styles` , this is where all your styles would be stored. Inside that folder, create a `tailwind.css` and an `index.css` file.

The `index.css` file is where we would be importing tailwind’s base styles and configurations, while the `tailwind.css` would contain the compiled output of the `index.css`.

## How to inject tailwind’s components, utilities and base styles to your app

Add the following to your `index.css` file.

```jsx
//index.css

@tailwind base;

@tailwind components;

@tailwind utilities;
```

`@tailwind` is a tailwind directive that is used to inject default `base styles`, `components`, `utilities` and custom configurations.

`@tailwind base` — _This injects Tailwind’s base styles, which is a combination of `Normalize.css` and some additional base styles._

For a complete reference of all the styles applied by Preflight, [see this stylesheet](https://unpkg.com/tailwindcss/dist/base.css).

_If you’re using `postcss-import`, use this import instead:_

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

`@tailwind components` — _This injects any component (small reusable styles like buttons and form elements, etc) classes registered by plugins defined in your tailwind config file._

If you’re using `postcss-import`, use this import instead:

`@import "tailwindcss/components";`

Below the component import is where you would add any of your custom component classes; stuff that you’d want loaded before the default utilities so the utilities could still override them.

Here’s an example:

```jsx
.btn { ... }
.form-input { ... }
```

Or if using a preprocessor or `postcss-import`:

```jsx
@import "components/buttons";
@import "components/forms";
```

`@tailwind utilities` — _This injects all of Tailwind’s utility classes(including the default and your own utilities) they are generated based on your config file._

If using `postcss-import`, use this import instead:

```jsx
@import "tailwindcss/utilities";
```

Below the utilities import is where you would add any custom utilities you need that don’t come out of the box with Tailwind.

Here is an example:

```jsx
.bg-pattern-graph-paper { ... }

.skew-45 { ... }
```

Or if using a preprocessor or `postcss-import`:

```jsx
@import "utilities/background-patterns";
@import "utilities/skew-transforms";
```

Tailwind will swap all these directives out at build time and replace them with the CSS generated.

## How to configure your app to build your CSS file

Configure your app to build the styles every time you run the `npm start` or `yarn start` command.

Open your `package.json` file and replace the content of `"scripts"` with:

```jsx
"scripts": {
  "build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
  "start": "npm run build:style && react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
```

## How to import your CSS to the app

Open your `index.js` file and import your tailwind styles.

```jsx
import './styles/tailwind.css';
```

Delete the `index.css` and `app.css` files in your projects root directory and remove their corresponding import statements in both the `Index.js` and `App.js` files respectively.

Your `index.js` file should look similar to this:

```jsx
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
  .......
```

After deletion it should become:

```jsx
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
```

Your `App.js` file should look like this before deletion:

```jsx
//App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
```

After deletion it should become:

```jsx
//App.js
import React from 'react';
import logo from './logo.svg';
```

These changes would cause an output similar to this:

![browser output](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/browseroutput.png?resize=300%2C230&ssl=1)<figcaption id="caption-attachment-4064">Output in your browser after deleting your index.css and app.css</figcaption>

To test that our configurations work correctly let’s create a simple sign-in form.

Open your `App.js` file and replace the content between the return function with:

```jsx
<div className="App" >
    <div className="w-full max-w-md bg-gray-800" >
      <form action="" className=" bg-white shadow-md rounded px-8 py-8 pt-8">
        <div className="px-4 pb-4">
          <label htmlFor="email" className="text-sm block font-bold  pb-2">EMAIL ADDRESS</label>
          <input type="email" name="email" id="" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline border-blue-300 " placeholder="Johnbull@example.com"/>
        </div>
        <div  className="px-4 pb-4">
          <label htmlFor="password" className="text-sm block font-bold pb-2">PASSWORD</label>
          <input type="password" name="email" id="" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline border-blue-300" placeholder="Enter your password"/>
        </div>
        <div>
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">Sign In</button>
        </div>
      </form>
    </div>
  </div>
```

What we’ve just done is we gave the `div` a width of `100%` with `w-full` , we also set the max-width with `max-w-md` for medium screens and larger.

We gave the form a white background with `bg-white` and gave it a border-radius to achieve the curved borders with `border`, `px-8` and `py-8` adds a padding of `8px` to the `x-axis` and `y-axis` respectively while `pt-8` adds a padding of `8px` to the top of the form.

We added `font-size` of `.875rem` to the label element with `text-sm` and made the element have a `display` of `block` and set the `font-weight` to a value of `700` with `font-bold`.

On the input element, we gave the element some box-shadow with `shadow` and used `.appearance-none` to reset any browser-specific styling on the input element.

We added a `line-height` of `1.25` with `leading-tight` and used the pseudo-class `focus` to remove browser-specific outlining of the focused input element with `focus:outline-none` and added a bit of box-shadow with `focus:shadow-outline`.

You should get a result similar to this.

![input form](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/form.png?resize=567%2C380&ssl=1)
{% codesandbox b1pr9 %}
## Conclusion

In this post, we’ve learned how to configure Create-React-App (CRA) to use TailwindCSS.  
Tailwind has awesome [documentation](https://tailwindcss.com/docs/installation/). Check it out for more information.  
You can also check out the [repository](https://github.com/Jolaolu/react-tailwind-demo.git) to this tutorial on GitHub to scaffold your app.
* * *
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [How to configure Create-React-App to use TailwindCSS](https://blog.logrocket.com/create-react-app-and-tailwindcss/) appeared first on [LogRocket Blog](https://blog.logrocket.com).