Cómo usar Tailwind CSS en React

En el mundo de desarrollo moderno, Tailwind CSS se ha establecido como una de las herramientas de estilado más utilizadas.

A diferencia de las librerías de componentes prefabricados (como Material UI o Bootstrap) o de las metodologías de CSS tradicional (BEM, CSS Modules), Tailwind opera bajo el concepto de Utility-First.

En este artículo, vamos a ver cómo integrar Tailwind CSS en un proyecto de React usando Vite, cómo configurarlo correctamente y que ventajas (y desventajas) tiene usarlo.

Instalación en Vite

La integración actual en Vite se realiza a través de un plugin nativo, lo que elimina la necesidad de archivos de configuración de JavaScript complejos (que antes hacian falta).

En las nuevas versiones, sólo tenemos que instalar el paquete core y el plugin específico para Vite.

npm install tailwindcss @tailwindcss/vite

Configuración del Plugin

Ahora, en el archivo vite.config.js (o .ts), importamos y registramos el plugin. Esto permite que Vite procese las clases de Tailwind durante el desarrollo y el build.

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(), // 2. Añadir al array
  ],
})

Construyendo un Componente

Vamos a rehacer nuestro famoso botón, pero esta vez con utilidades.

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>

// En móvil: fondo azul.
// A partir de 'md' (768px): fondo verde.
<div className="bg-blue-500 md:bg-green-500 h-10 w-full">
  Cambio de color responsivo
</div>

Gestión de clases dinámicas

El problema de Tailwind es que el atributo className se suele volver kilométrico y difícil de leer, especialmente cuando metemos lógica condicional con Template Literals.

// ❌ Difícil de leer
<div className={`p-4 border ${isActive ? 'bg-blue-100 border-blue-500' : 'bg-gray-100 border-gray-300'}`}>

Por esto es habitual usar dos herramientas casi obligatorias:

Instalamos las utilidades:

npm install clsx tailwind-merge

Creamos una función helper (usualmente en src/lib/utils.js):

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

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

Ahora podemos crear componentes que acepten clases externas y variantes de forma limpia:

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

export default function Button({ className, variant = "primary", children, ...props }) {
  return (
    <button
      className={cn(
        // 1. Clases base (siempre se aplican)
        "py-2 px-4 rounded font-semibold transition-colors focus:outline-none",
        
        // 2. Variantes condicionales
        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. Clases externas (permite al padre añadir márgenes o anchos)
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Este patrón nos permite mantener la flexibilidad de Tailwind encapsulada dentro de componentes React.

Reutilización y extracción

Otra duda frecuente al usar clases de utilidad es cómo evitar la repetición de código, sobre todo con clases larguísimas que apenas te caben en la pantalla.

En el contexto de React y Tailwind, la solución que se suele decir es que crees un componente por el elemento. Es decir, que en lugar de repetir clases:

// ❌ Repetitivo y difícil de mantener
<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="..." />

Te crees un componente,

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

La clase sigue siendo insufriblemente larga, pero al menos ya solo la ves una vez 🤭.