How to Use Tailwind CSS in React

In the modern development world, Tailwind CSS has established itself as one of the most widely used styling tools.

Unlike pre-built component libraries (like Material UI or Bootstrap) or traditional CSS methodologies (BEM, CSS Modules), Tailwind operates under the Utility-First concept.

In this article, we will see how to integrate Tailwind CSS into a React project using Vite, how to configure it correctly, and the advantages (and disadvantages) of using it.

Installation in Vite

Current integration in Vite is done through a native plugin, eliminating the need for complex JavaScript configuration files (which were previously required).

In newer versions, we only need to install the core package and the Vite-specific plugin.

npm install tailwindcss @tailwindcss/vite

Plugin Configuration

Now, in the vite.config.js (or .ts) file, we import and register the plugin. This allows Vite to process Tailwind classes during development and build.

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(), // 2. Add to the array
  ],
})

Building a Component

Let’s remake our famous button, but this time with utilities.

export default function BotonTailwind() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  );
}

<button className="bg-blue-500 hover:bg-blue-700 active:bg-blue-800 text-white py-2 px-4 rounded">
  Enviar
</button>

// On mobile: blue background.
// From 'md' (768px): green background.
<div className="bg-blue-500 md:bg-green-500 h-10 w-full">
  Cambio de color responsivo
</div>

Managing Dynamic Classes

The problem with Tailwind is that the className attribute often becomes huge and hard to read, especially when we include conditional logic with Template Literals.

// ❌ Hard to read
<div className={`p-4 border ${isActive ? 'bg-blue-100 border-blue-500' : 'bg-gray-100 border-gray-300'}`}>

This is why it’s common to use two almost mandatory tools:

Install the utilities:

npm install clsx tailwind-merge

Create a helper function (usually in src/lib/utils.js):

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

Now we can create components that accept external classes and variants cleanly:

import { cn } from "../lib/utils";

export default function Button({ className, variant = "primary", children, ...props }) {
  return (
    <button
      className={cn(
        // 1. Base classes (always applied)
        "py-2 px-4 rounded font-semibold transition-colors focus:outline-none",
        
        // 2. Conditional variants
        variant === "primary" && "bg-blue-600 text-white hover:bg-blue-700",
        variant === "secondary" && "bg-gray-200 text-gray-800 hover:bg-gray-300",
        variant === "danger" && "bg-red-500 text-white hover:bg-red-600",
        
        // 3. External classes (allows parent to add margins or widths)
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

This pattern allows us to maintain Tailwind’s flexibility encapsulated within React components.

Reuse and Extraction

Another common question when using utility classes is how to avoid code repetition, especially with extremely long classes that barely fit on the screen.

In the context of React and Tailwind, the usual solution is to create a component for the element. That is, instead of repeating classes:

// ❌ Repetitive and hard to maintain
<img className="rounded-full w-16 h-16 border-2 border-white" src="..." />
<img className="rounded-full w-16 h-16 border-2 border-white" src="..." />

You create a component,

// ✅ Abstraction via React
function Avatar({ src }) {
  return <img className="rounded-full w-16 h-16 border-2 border-white" src={src} />;
}

The class is still unbearably long, but at least you only see it once 🤭.