Tailwind CSS Guía de Componentes en Español

# Tailwind CSS Guía de Componentes

Domina Tailwind CSS para crear interfaces modernas y responsivas con componentes reutilizables.

## Configuración del Tema

```typescript
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primario: {
          50: "#eff6ff",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
        },
        secundario: {
          500: "#8b5cf6",
          600: "#7c3aed",
        },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
      animation: {
        "fade-in": "fadeIn 0.5s ease-in-out",
        "slide-up": "slideUp 0.3s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideUp: {
          "0%": { transform: "translateY(10px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

export default config;
```

## Componentes Reutilizables

### Botón con Variantes

```typescript
// components/Boton.tsx
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const variantesBoton = cva(
  "inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
  {
    variants: {
      variante: {
        primario: "bg-primario-600 text-white hover:bg-primario-700 focus:ring-primario-500",
        secundario: "bg-secundario-500 text-white hover:bg-secundario-600 focus:ring-secundario-500",
        contorno: "border-2 border-primario-600 text-primario-600 hover:bg-primario-50",
        fantasma: "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800",
        peligro: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
      },
      tamaño: {
        pequeño: "px-3 py-1.5 text-sm",
        mediano: "px-4 py-2 text-base",
        grande: "px-6 py-3 text-lg",
      },
    },
    defaultVariants: {
      variante: "primario",
      tamaño: "mediano",
    },
  }
);

interface BotonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof variantesBoton> {
  cargando?: boolean;
}

export function Boton({
  className,
  variante,
  tamaño,
  cargando,
  children,
  disabled,
  ...props
}: BotonProps) {
  return (
    <button
      className={cn(variantesBoton({ variante, tamaño }), className)}
      disabled={disabled || cargando}
      {...props}
    >
      {cargando && (
        <svg className="animate-spin -ml-1 mr-2 h-4 w-4" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
        </svg>
      )}
      {children}
    </button>
  );
}
```

### Tarjeta Responsiva

```typescript
// components/Tarjeta.tsx
interface TarjetaProps {
  titulo: string;
  descripcion: string;
  imagen?: string;
  etiqueta?: string;
  onClick?: () => void;
}

export function Tarjeta({ titulo, descripcion, imagen, etiqueta, onClick }: TarjetaProps) {
  return (
    <article
      onClick={onClick}
      className={cn(
        "group relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800",
        "border border-gray-200 dark:border-gray-700",
        "shadow-sm hover:shadow-xl transition-all duration-300",
        onClick && "cursor-pointer"
      )}
    >
      {imagen && (
        <div className="aspect-video overflow-hidden">
          <img
            src={imagen}
            alt={titulo}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />
        </div>
      )}
      
      <div className="p-6">
        {etiqueta && (
          <span className="inline-block px-3 py-1 text-xs font-semibold text-primario-600 bg-primario-50 rounded-full mb-3">
            {etiqueta}
          </span>
        )}
        
        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primario-600 transition-colors">
          {titulo}
        </h3>
        
        <p className="text-gray-600 dark:text-gray-300 line-clamp-2">
          {descripcion}
        </p>
      </div>
    </article>
  );
}
```

### Modal Accesible

```typescript
// components/Modal.tsx
"use client";

import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { cn } from "@/lib/utils";

interface ModalProps {
  abierto: boolean;
  onCerrar: () => void;
  titulo: string;
  children: React.ReactNode;
}

export function Modal({ abierto, onCerrar, titulo, children }: ModalProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;

    if (abierto) {
      dialog.showModal();
      document.body.style.overflow = "hidden";
    } else {
      dialog.close();
      document.body.style.overflow = "";
    }

    return () => {
      document.body.style.overflow = "";
    };
  }, [abierto]);

  if (typeof window === "undefined") return null;

  return createPortal(
    <dialog
      ref={dialogRef}
      onClose={onCerrar}
      className={cn(
        "fixed inset-0 z-50 m-auto",
        "w-full max-w-lg rounded-2xl p-0",
        "bg-white dark:bg-gray-800",
        "shadow-2xl backdrop:bg-black/50",
        "animate-fade-in"
      )}
    >
      <div className="flex items-center justify-between p-4 border-b dark:border-gray-700">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white">
          {titulo}
        </h2>
        <button
          onClick={onCerrar}
          className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
          aria-label="Cerrar modal"
        >
          ✕
        </button>
      </div>
      <div className="p-6">{children}</div>
    </dialog>,
    document.body
  );
}
```

## Diseño Responsivo

```typescript
// components/Cuadricula.tsx
export function CuadriculaProductos({ productos }: { productos: Producto[] }) {
  return (
    <div className={cn(
      "grid gap-6",
      "grid-cols-1",           // Móvil: 1 columna
      "sm:grid-cols-2",        // Tablet pequeña: 2 columnas
      "md:grid-cols-3",        // Tablet: 3 columnas
      "lg:grid-cols-4",        // Escritorio: 4 columnas
      "xl:grid-cols-5"         // Pantalla grande: 5 columnas
    )}>
      {productos.map((producto) => (
        <Tarjeta
          key={producto.id}
          titulo={producto.nombre}
          descripcion={producto.descripcion}
          imagen={producto.imagen}
          etiqueta={producto.categoria}
        />
      ))}
    </div>
  );
}
```

Esta guía de Tailwind CSS en español te ayudará a crear componentes profesionales y responsivos.