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

Source: Dev.to

Introduction

In this guide we’ll discuss what Tailwind CSS is, how to use it in a React project, and why developers choose it.

Tailwind CSS – 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

• Node.js installed on your system. (Visit the Node.js website to install it for free.)
• A React project (or be ready to create one – see the step below).
• Basic knowledge of React.

Note: If you haven’t created a React app yet, don’t worry – we’ll cover that in the next section.

Why Tailwind CSS?

• Provides a utility‑first approach with many predefined classes.
• Helps developers build UI faster without writing custom CSS for each element.
• Enables responsive design directly in the markup.
• Works seamlessly with React components.
• Used by modern sites and tools such as Shopify and Cursor. — Source: Tailwind CSS official website

Step 1 – Create a React App

Create the project with Vite

npm create vite@latest project-name

Vite is recommended by the React docs for fast development. (See my detailed blog on “How to Create a React App” for a deeper comparison.)

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

The dependencies will be added to package.json.

Configure the Vite plugin

Open project-name/vite.config.js and add the Tailwind plugin:

// vite.config.js
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

Edit project-name/src/index.css and replace its content with:

@import "tailwindcss";

Use Tailwind classes in a component

// src/App.tsx (or App.jsx)
function App() {
  return (
    <>
      {/* Add Tailwind classes to style your elements */}
      Hello World
    </>
  );
}

export default App;

In this example the background, text color, font size, font family, text alignment, and margin are all controlled by Tailwind utility classes.

Conclusion

We covered what Tailwind CSS is, why it’s popular, and how to install and use it in a React project built with Vite. The steps are kept beginner‑friendly, avoiding deep dives that could overwhelm newcomers.

If you encounter any issues while installing or using Tailwind CSS, feel free to leave a comment – I’ll be happy to help.

Further Reading

• Installing Tailwind CSS with Vite – Tailwind CSS Docs
• Node.js – Run JavaScript Everywhere
• Tailwind CSS – Rapidly build modern websites
• Showcase – Tailwind CSS
• How to Use Bootstrap in a React Project (Beginner Guide)
• What Are Props in React? A Beginner‑Friendly Guide
• Conditional Rendering in React: A Practical Guide for Beginners
• How to Use map() in React (With Simple Examples)
• How to Create a React App Using Vite (Step‑by‑Step Guide for Beginners)
• Understanding React Project Structure Created by Vite (Beginner’s Guide)
• React Fragments Explained: How to Group Elements Without Extra DOM Nodes
• React Components Explained: A Beginner‑Friendly Guide with Examples