Setup create-react-app with Tailwind CSS

Recently, I've been having fun with writing front-end code using utility-first CSS frameworks instead of full-blown toolkit ones like Bootstrap and Bulma. It helps me build and customize my page components immediately without having to write my own CSS from scratch. After seeing the attention that Tailwind CSS is getting from different communities and platforms, I decided to try it in one of my personal projects. It made styling pages more fun because it's so easy to use and the documentation is really intuitive.

Since it's component-friendly, I tried using it on my following project with create-react-app to learn how well it fits with Single-Page Applications. 😎

And now, I will help you setup your own create-react-app project with Tailwind CSS. Let's get started!

First, let's create a new ReactJS project with create-react-app.

npx create-react-app your-app-name

Next, we can easily install the Tailwind CSS module afterwards on our fresh create-react-app project without having to touch the actual scaffolding. Just run the following command on npm:

npm install tailwindcss --save-dev

After installing Tailwind CSS, we'll have to generate our configuration file which is in javascript format that is accessible and easy to get used to by using this command:

npx tailwind init tailwind.js

You can use any filename that you like but naming it tailwind.js as default is a recommendation from the documentation which is usually nice to follow.

Then, as what the documentation suggests, we'll add Tailwind as a PostCSS plugin in our build chain. Install these peer dependencies via:

npm install postcss-cli autoprefixer --save-dev

Afterwards, we'll have to create a postcss.config.js file where we'll add Tailwind as a plugin by passing the path within.

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss('./path/to/your/tailwind.js'),
    require('autoprefixer'),
  ]
}

Your tailwind.js and postcss.config.js configuration files can be included in any part of your directory but right now, I just put it within the root level of my project.

Next, we'll have to create an entry point so we'll be able to use Tailwind in our CSS. In this case, I always use the recommendation from the docs.

Just copy and paste the code below within a new file named tailwind.css located in your project's /src directory or another custom folder within to separate your static and custom styles from generated ones. In my case, I created a custom /styles directory:

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
@tailwind base;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

After pasting this code and saving the file, we'll now install npm-run-all as our tooling to run our npm scripts in parallel or sequential order. This is not an actual requirement but I highly recommend it especially to Windows users. This CLI tool helps so we can run our scripts in cross-platform.

npm install npm-run-all --save-dev

Next, we'll have to configure our package.json file to build our CSS and start our local create-react-app server. The scripts section will now look similar to this:

"scripts": {
    "start": "npm-run-all --parallel watch:css start:react",
    "build": "npm-run-all build:css build:react",
    "build:css": "postcss src/styles/tailwind.css -o src/index.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/index.css -w",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

We'll now be able to run the npm start script within npm to build our files and start our server.

npm start

Lastly, to test if Tailwind CSS is working within your components, we'll just have to import the generated index.css file and add a utility class from Tailwind's documentation within our JSX like so:

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

const App = () => {
  return <div className="bg-blue-100">Hello World!</div>
};

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

Here's how it looks on the browser!

This is a screenshot in 300% zoom made with Screely.

---

That's a wrap! Thanks for reading and I hope that I was able to introduce this setup properly. 😄

Comments

[Brenden Bixler]

As of tailwind 1.0, you'll need to make a minor change in tailwind.css:

@tailwind preflight; -> @tailwind base;

[Nards Paragas]

Updated the post according to the changes you suggested Brenden, thanks a lot!

[ptmdmusique]

Hi Nards, thank you very much for the great post!
I tried to follow the instruction above and it works perfectly fine with the className stuff. However, I couldn't figure out how to make directives such as @apply to work with both CSS and SASS files (I got unknown property when I inspect the elements with Chrome Inspector).
Have you ever made those directives work before?

[Nards Paragas]

Thanks for the feedback!

I haven't tried using directives to extent yet but I'm assuming this one's related to PostCSS. Sorry I have no solid answer now but I'll try to look and get back into this once I'm free.

[ptmdmusique]

Hi Nards,

Thanks for the quick reply! Apparently, I had to override webpack config (not really recommended) using react-app-rewired and customize-cra with some PostCSS config.
The very short tutorial I use is : medium.com/@harryhedger/quick-how-...

If possible, please test this and (maybe?) note this for users who use create-react-app with Tailwind directives so that they don't have to look everywhere like me anymore! Thanks :D

[Nards Paragas]

Thanks for this! Will pin this one on the post itself later. Sorry for the late response!

[Jhoan Beron]

Hi Nards, thanks for writing this post. Just a minor thing I noticed the class .bg-blue does nothing, you may want to do something like

Hello World! instead. I had everything in order but I coulnt see the blue background applied lol. Thanks again.

[Nards Paragas]

Hey Jhoan! Thanks for the catch, it seems like they updated the background color class names. I've applied a change on the previous class name to keep the post updated. 😄

[Kyle Galbraith]

Awesome blog post Nards! This is exactly what I was looking for and you got me unblocked with this, thank you.

[Nards Paragas]

I'm glad that I was able to help you Kyle! I'll make sure to do more config/setup posts like this in the future. 😄

[Riccardo Tartaglia]

Looking for a React UI Kit powered by Tailwind? 🌪️🔥👨‍💻

Look this:
windy-docs.vercel.app

[Jacob McCrumb]

Thanks for the write-up, and nice tip about npm-run-all. Keeps it nice and simple!

[Nards Paragas]

Thanks for the positive feedback, I'll try my best to keep this updated.

[Brandon Williams]

Great work. Helped a bunch👍🏽

[Nards Paragas]

Thanks!