Tailwind CSS is utility-first CSS framework. Unlike traditional frameworks, such as Bootstrap or Foundation, you don’t get default theme or built-in components. Instead, Tailwind gives you low-level utility classes, which makes easy to build complex UI components.

To use Tailwind with React, first let’s create new React application with create-react-app.

$ create-react-app react-tailwindcss-demo

Then we need to install Tailwind CSS as dev dependency.

$ cd react-tailwindcss-demo

$ yarn add tailwindcss --dev

After installation process is done, we need to create Tailwind CSS configuration file. To do so, we need to run the following command:

$ ./node_modules/.bin/tailwind init tailwind.js

Then we need to create Tailwind CSS source file, /src/css/tailwind.src.css and write Tailwind directives:

@tailwind base;

@tailwind components;

@tailwind utilities;

Then we need to add custom script in package.json file. Let’s call it tailwind:css. This script will create src/css/tailwind.css file from src/css/tailwind.src.css.

"scripts": {

"tailwind:css":"tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css",

"start": "npm run tailwind:css && react-scripts start",

"build": "npm run tailwind:css && react-scripts build"

}

Make sure, you prepend start and build scripts with tailwind:css script.

Now you can run yarn start script to generate src/css/tailwind.css file and open the React dev server at http://localhost:3000/.

You will see the following output in Terminal:

$ tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css

Building Tailwind!

Finished building Tailwind!

This means, that Tailwind successfully generated css file. It’s time to import it in src/index.js.

...

import './index.css';

import './css/tailwind.css';

...

Now, we can finally use some CSS classes from Tailwind in our React application.

In src/App.js file:

1. Change className=”App” to className=”text-center”.

2. Change className=”App-header” to className=”bg-purple-darker m-6 p-6 rounded shadow-lg”

3. Change className=”App-intro” to className=”text-base”

Your render() method in App.js file should look like this:

<div className="text-center">

<header className="bg-purple-darker m-6 p-6 rounded shadow-lg">

<img src={logo} className="App-logo" alt="logo" />

<h1 className="text-white text-3xl">Welcome to React</h1>

</header>

<p className="text-base">

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

You can check out the working demo and the source code at Github.