Using Tailwind CSS With React

Subscribe On YouTube

In the previous tutorial you’ve learned about the Tailwind CSS basics and how to setup a basic web project with Tailwind. In this tutorial we’re going to take a look at how to use and configure Tailwind CSS in a React project.

Setting Up The React Project

The first step is to setup the React project by using the create-react-app script in the following way:

$ npx create-react-app react-tailwindcss

By using npx we’re able to execute the create-react-app script directly without needing to install it first. The new React project is named react-tailwindcss.

Let’s change into the newly created project folder by using the following command:

$ cd react-tailwindcss

Inside this folder you’ll find the basic React starter project template.

Adding Dependencies To The Project

The next step is to add dependencies to the project by using the yarn add command:

$ yarn add tailwindcss postcss-cli autoprefixer -D

Creating A Tailwind Configuration File

To further complete the project setup let’s also add a Tailwind CSS configuration file by executing the following command inside the project folder:

$ npx tailwind init —full

This command is creating a new file named tailwind.config.js with a basic Tailwind CSS configuration inside.

Configure PostCSS

Tailwind requires a CSS build process. To manage and configure this build process we’re using PostCSS. To be able

$ touch postcss.config.js

Insert the following code into the file:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

The PostCSS build process will make use of two plugins: tailwindcss and autoprefixer.

Injecting Tailwind CSS Into The Project

In the src folder we’re now creating a new subfolder styles. Inside that styles folder create a new file tailwind.css and insert the following lines of code:

@tailwind base;

@tailwind components;

@tailwind utilities;

Here we’re making use of the @tailwind directives to import CSS code from Tailwind’s base, components, and utilities packages.

Build Scripts

Now let’s add a corresponding build script to our package.json file.

First of all let’s take a look at the scripts section which is already available in package.json by default:

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

Then add the following new entry in this section:

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

This build:css script is associated with the command postcss src/styles/tailwind.css -o src/styles/main.css. This command used the PostCSS CLI to execute the CSS build for file src/styles/tailwind.css. The result of the CSS build is inserted into file src/styles/main.css.

Now the execution of the build:css script can be integrated into the start and build script as well, so that we’re making sure that the CSS build is executed everytime we’re starting the application server:

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

Finally the scripts section should look like the following

 "scripts": {
    "start": "npm run build: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/tailwind.css -o src/styles/main.css"
  },

The CSS build process can now be executed manually by executing:

$ yarn build:css

or by starting of the application server by executing:

$ yarn start

Using Tailwind CSS In A React Component

Now we’re ready to make use of Tailwind’s CSS classes in our React components, e.g. in App component like you can see in the following:

import React from 'react';
import './styles/main.css';

function App() {
  return (
    <div class="h-64">
        <div class="p-4 m-4 bg-green-600">
            <h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
        </div>
        <div class="p-4 m-4 bg-green-300 h-full">
            <h2 class="text-green-900">Have much fun using Tailwind CSS</h2>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">My Tailwind Button</button>
        </div>  
    </div>
  );
}

export default App;

The result should then look like what you can see in the following screenshot: