How to Add Tailwind CSS to a React App (Step-by-Step Guide)

#react #tailwindcss #webdev #beginners

Introduction

In this blog, we’ll discuss what Tailwind CSS is, how to use it in a React project, and why developers use it. First, understand what Tailwind CSS is:

A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. —Tailwind CSS official website

Prerequisites

To follow along, you should have these prerequisites:

You should have Node.js installed on your system. (Visit Node.js website to install Node.js, if you haven’t already, for free)
You should have a React project created
You should have basic knowledge of React

Note: If you haven’t already created the React app, don’t worry. I’ll show you how to create a React app in the section below.

Why Use Tailwind CSS with React?

Tailwind CSS provides a utility-first approach
Tailwind CSS has many commonly used predefined classes. We use those classes in our project.
Tailwind CSS helps developers build UI faster.
The developers do not have to write custom CSS for each element.
It also allows developers to build UI responsive without leaving the HTML.
It also works perfectly with React components.
Many modern websites and tools, such as Shopify and Cursor, use Tailwind. — Source: Tailwind CSS official website

Step 1 - Create React App

You can create a React app using Vite with this command:

npm create vite@latest project-name

I am using Vite because it’s the recommended by React docs,. I have a detailed blog on “How to Create a React App”. Visit this blog to understand the difference much better.

Step 2 - Install Tailwind CSS

Now, install Tailwind CSS in your project (created by Vite) with this command:

npm install tailwindcss @tailwindcss/vite

npm will install the dependencies (it might take a few seconds). You can verify the installation from package.json.

Configure Vite Plugin

To configure Vite plugin, first open the file vite.config.js. You can find this file in project-name/vite.config.js (if you created project using Vite). Here, project-name corresponds to the name of your project.

1- In the top of the vite.config.js add this line to import tailwindcss

import tailwindcss from '@tailwindcss/vite'

2- After this, add this in the plugin section in the file (vite.config.js)

tailwindcss()

So, your vite.config.js looks like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Import Tailwind CSS

To import Tailwind CSS, locate the index.css file and open it. You can find index.css in project-name/src/index.css. Now, replace the content of index.css with this line:

@import "tailwindcss";

Now, you can start using Tailwind CSS in your project. Like:

function App() {
  return (
    <>
      <h2 className="bg-red-400 font-mono text-4xl text-gray-200 m-4 text-center">
        Hello World
      </h2>
    </>
  );
}
export default App;

In this example, I have styled the background, text-color, font-size, font, text-alignment and added a margin. If you want to learn Tailwind CSS in a beginner friendly way, feel free to comment to let me know.

When Should You Use Tailwind CSS (and When Not)?

Good for component-based apps
Not ideal if someone prefers traditional CSS frameworks

Conclusion

In this blog, I explained what Tailwind is, why it is used, and how to install and use it in a React project. I have explained step-by-step process in beginner-friendly way. I did not go too deep to avoid confusing beginners. If you need help regarding any issue while installing or using, feel free to comment below. I’ll be happy to help you.