🎨 ReactJS – Tailwind CSS Integration

How to add and use Tailwind CSS in React?

Tailwind CSS is a utility-first CSS framework used to create modern, responsive, and attractive user interfaces. It allows developers to style HTML elements directly using utility classes.

For example, classes like bg-blue-500, text-white, p-4, and rounded-lg help you design user interfaces quickly.

Tailwind CSS can be integrated into a React application using different methods. In this tutorial, we will learn two methods:

1. Using the Vite plugin (recommended)
2. Using the Tailwind CSS CDN (Play CDN)

This tutorial uses Tailwind CSS v4.

You can use the Tailwind CSS Play CDN to try Tailwind CSS directly in your React application without installing Tailwind CSS through npm or configuring Vite for Tailwind.

This method is useful for beginners who want to learn Tailwind CSS quickly. The Play CDN is intended for development and learning, not for production websites.

Step 1: Open index.html

Open the index.html file in your React + Vite project.

Step 2: Add the Tailwind CSS CDN script

Add the following script inside the <head> section of index.html.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Step 3: Use Tailwind CSS in React

Open src/App.jsx and use Tailwind CSS utility classes in your JSX elements.

You do not need to import Bootstrap or install Tailwind CSS for this CDN example. You need an internet connection to load the CDN script.

The Vite plugin is the recommended method for integrating Tailwind CSS into a React application created with Vite.

Step 1: Create a React application

Run the following commands in your terminal:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Step 2: Install Tailwind CSS

Install Tailwind CSS and its official Vite plugin.

npm install tailwindcss @tailwindcss/vite

Step 3: Configure Vite

Open vite.config.js and configure the Tailwind CSS plugin.

Step 4: Import Tailwind CSS

Add @import "tailwindcss"; to your src/index.css file.

Step 5: Use Tailwind CSS classes

Now you can use Tailwind CSS utility classes directly in JSX.