How to Set Up or Integrate Tailwind CSS in React 18

Last Updated on by in React JS

In this guide, we will learn how to eloquently set up or add Tailwind CSS in React js application.

We will also show you how to create a simple user interface card component using the Tailwind CSS framework.

Tailwind CSS is primarily a utility-first CSS framework that helps in developing super cool custom user interfaces.

It provides better flexibility to frontend developers by offering tons of UI design components.

It helps to spruce up HTML, and anybody can easily create better-looking layouts by tailwind’s built-in classes.

Tailwind offers loads of pre-designed user interface widgets that exponentially increase the UI development speed.

This Tailwind CSS tutorial is going to be a useful React Tailwind CSS example for newbie React developers.

Especially who are going to see the divine confluence of React and Tailwind CSS.

How to Add and Use Tailwind CSS v3 in React Js App

  • Step 1: Install New React App
  • Step 2: Install Tailwind CSS Module
  • Step 3: Create Tailwind Config File
  • Step 4: Add Tailwind Directives
  • Step 5: Compile Tailwind CSS
  • Step 6: Create Component with Tailwind
  • Step 7: Start React Server

Install New React App

Open the command prompt, type the command then execute command to install the create-react-app tool:

npm install create-react-app --global

In this step, we will run the given command and install a new react project.

npx create-react-app react-demo

Get inside the application directory:

cd react-demo

Install Tailwind CSS Module

Next, you need to type and execute the given command to install the tailwind css.

npm install -D tailwindcss --legacy-peer-deps

npm install @heroicons/react --legacy-peer-deps

npm install @headlessui/react --legacy-peer-deps

Create Tailwind Config File

In this step, we will create the tailwind.config.js file; therefore run the following command to generate the tailwind config file.

npx tailwindcss init
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind Directives

Now, you have to move to the App.css file, in this file we will place the @tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Compile Tailwind CSS

Further, run the following command to run the tailwind CLI to scan the React template files for classes and build CSS.

npx tailwindcss -i ./src/App.css -o ./src/styles/output.css --watch

Create Component with Tailwind

In order to test if the Tailwind CSS is implemented, we are going to use the Tailwind Card component in React js.

Open the App.js file and add the given code into the file.

import './App.css'
import React from 'react'


function App() {

  return (
    <div
      class={`h-screen w-full flex items-center justify-center bg-gray-300 flex-col`}
    >
      <label class="toggleDarkBtn">
        <input type="checkbox" />
        <span class="slideBtnTg round"></span>
      </label>

      <div class="max-w-sm rounded overflow-hidden bg-gray-100 p-5 rounded-lg mt-4 text-white dark:bg-gray-900">
        <img
          class="w-full"
          src="https://v1.tailwindcss.com/img/card-top.jpg"
          alt="Sunset in the mountains"
        />
        <div class="px-6 py-4">
          <div class="text-gray-800 dark:text-gray-200 font-bold text-xl mb-2">
            The Coldest Sunset
          </div>
          <p class="text-gray-800 dark:text-gray-200">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptatibus quia, nulla! Maiores et perferendis eaque,
            exercitationem praesentium nihil.
          </p>
        </div>
        <div class="px-6 pt-4 pb-2">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #photography
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #travel
          </span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #winter
          </span>
        </div>
      </div>
    </div>
  )
}

export default App

Start React Server

In the last step we will start the react development server using the given command:

npm start

Open the url to view the application on the browser:

http://localhost:3000

How to Set Up or Integrate Tailwind CSS in React Js

Conclusion

In this comprehensive article, we have found out how to implement Tailwind CSS version 3 in React js application from scratch.

We hope this step-by-step tutorial will help you create better and more consistent React user interfaces within significantly less time.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.