How to Implement Tailwind CSS in React Project

In this comprehensive post, we will step by step reveal how to set up Tailwind CSS version 3 in React js application from scratch. To implement Tailwind CSS in React, we will use the Tailwind module.

Tailwind is a utility-first CSS framework that comes with custom or dynamic class and eye-catching user interface elements. Tailwind is used for building a super handy UI layout, and it requires no pain of writing CSS from scratch.

A tailwind is a great tool, especially when you are a beginner in UI development, and it offers a mechanism that helps you get started with new captivating projects.

Setting up tailwind in React is not tricky; It requires specific steps to be followed; this tutorial will show you the right direction with the code example. After completing this tutorial, you will understand how to install Tailwind CSS in React.

How to Set Up Tailwind CSS v3 in React App

  • Step 1: Create React Project
  • Step 2: Add Tailwind Module
  • Step 3: Set Up Tailwind Config File
  • Step 4: Register Tailwind Directives
  • Step 5: Add Tailwind Component
  • Step 6: View App on Browser

Create React Project

We are sure you have already set up Node and NPM on your machine, execute the provided command to install the new React app.

npx create-react-app react-blog

Move into the project folder:

cd react-blog

Add Tailwind Module

If you want to use the Tailwind in React, you have to install the Tailwind library using the given command.

npm install -D tailwindcss

Set Up Tailwind Config File

In your project folder you have to make the new file, you have to name it tailwind.config.js we keep the tailwind configurations in this file.

npx tailwindcss init

After running the above command file will be generated in your react project, make sure to add the given code into the file.

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

Register Tailwind Directives

In order to use the Tailwind CSS, ensure that you add the following paths within the App.css file.

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

We have configured the tailwind CSS; now, it is time to execute the provided command and let the CSS compile.

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

Add Tailwind Component

Now, we will show you how to add the tailwind CSS component to react component.

Head over to the App.js file or any component where you want to create the UI component using Tailwind CSS.

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="The title"
    />
    <div class="px-6 py-4">
      <div class="text-gray-800 dark:text-gray-200 font-bold text-xl mb-2">
        The Title
      </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"
      >
        #movies
      </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"
      >
        #food
      </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"
      >
        #traveling
      </span>
    </div>
  </div>
</div>
) } export default App

View App on Browser

You need to run the given command to start the react app.

npm start

Use the following url to view the app:

http://localhost:3000

How to Implement Tailwind CSS in React Project

Conclusion

Tailwind is exorbitantly easy to learn and use; in this guide, we tried to give you a small demo so that you have a better understanding of using Tailwind components in react js app.

The primary advantage of Tailwind is that it refrains you from writing tons of CSS; you can create user interfaces in significantly less time.