Introducción a la extensión Tailwind CSS daisyUI: crea UI rápido solo con clases

Tailwind CSS ofrece gran libertad gracias a sus clases utilitarias, pero tener que combinar botones, tarjetas o modales cada vez puede resultar tedioso. daisyUI se apoya sobre Tailwind añadiendo “clases de componentes + temas”, reduciendo significativamente el tiempo de diseño y estilizado.

La instalación y la configuración varían ligeramente según el framework que uses (Next.js, Vite, Remix, etc.). En este artículo asumimos que ya está instalado. Si necesitas comenzar, consulta la guía oficial de instalación:

Guía de instalación oficial

¿Qué es daisyUI?

Commandbox 광고

daisyUI es un plugin de Tailwind CSS que ofrece patrones de UI comunes como “clases de componentes”. En lugar de combinar manualmente utilidades para botones, tarjetas o modales, puedes usar clases cortas y significativas como btn, card o modal.

  • Clases de componentes: btn, card, navbar, modal, etc.
  • Sistema de temas: cambia de tema fácilmente con data-theme="light".
  • Integración natural con Tailwind: ajusta finamente con utilidades.

La ventaja más evidente es:

  • El resultado visual es similar, pero el HTML es mucho más corto.

A continuación se muestra la diferencia en el HTML al crear un “botón primario” y una “tarjeta con botón de acción” con y sin daisyUI.

daisyUI vs sin daisyUI: ¿el mismo resultado, HTML más corto?

1) Botón primario

(A) Solo Tailwind — se combinan utilidades para el estilo.

<button
  class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
         bg-blue-600 text-white shadow-sm hover:bg-blue-700
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
         disabled:opacity-50 disabled:pointer-events-none"
>
  Primary
</button>

(B) Con daisyUI — el mismo botón con una clase de componente más corta.

<button class="btn btn-primary">Primary</button>

El punto es que daisyUI agrupa las combinaciones repetitivas, permitiendo llenar la pantalla rápidamente y luego afinar con Tailwind.

2) Tarjeta + botón de acción

(A) Solo Tailwind — se combinan clases para contenedor, título, cuerpo y acción.

<div class="w-96 rounded-2xl bg-white shadow-xl">
  <div class="p-6">
    <h2 class="text-lg font-semibold">Card title</h2>
    <p class="mt-2 text-sm text-slate-600">
      Cuando usas la misma tarjeta en varios lugares, las clases se alargan y se duplican.
    </p>
    <div class="mt-4 flex justify-end">
      <button
        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
               bg-blue-600 text-white shadow-sm hover:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        Confirmar
      </button>
    </div>
  </div>
</div>

(B) Con daisyUI — las clases que indican el “rol” de la tarjeta aparecen primero, y se complementan con Tailwind si es necesario.

<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>
      daisyUI ofrece la estructura repetitiva de UI como clases de componentes, reduciendo el HTML.
    </p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Confirmar</button>
    </div>
  </div>
</div>

En resumen, daisyUI:

  • Reduce la longitud de las clases y mejora la legibilidad.
  • Uniformiza los valores por defecto de los patrones de UI repetidos.
  • Incluye temas para una coherencia rápida.

En la siguiente sección veremos por qué el sistema de temas es tan conveniente.

Sistema de temas: ¿por qué facilita el modo oscuro y los temas de marca?

Commandbox 광고

daisyUI destaca por su cambio de tema. Proporciona temas basados en variables CSS, cambiando colores, fondos y tonos de texto en toda la aplicación.

Imagen de cambio de tema claro y oscuro

Aplicar tema en HTML

<html data-theme="light">
  <body>
    <button class="btn btn-primary">Hello</button>
  </body>
</html>

Ejemplo de conmutador de tema con JavaScript

const html = document.documentElement;

function toggleTheme() {
  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
  html.setAttribute("data-theme", next);
}

Ventajas de este enfoque:

  • Se resuelve el tema a nivel global en lugar de redefinir colores por componente.
  • Se estabiliza el sistema de diseño (colores/tonos) rápidamente al inicio del proyecto.

¡Usa Tailwind y daisyUI juntos!

daisyUI es ideal para definir la estructura básica y luego afinar con Tailwind.

Por ejemplo, añade márgenes, alineación y responsividad a un botón con Tailwind:

<button class="btn btn-primary w-full sm:w-auto px-6">
  Guardar
</button>
  • btn btn-primary: estilo de componente (coherencia).
  • w-full sm:w-auto px-6: diseño, responsividad y ajustes finos.

¿Cuándo es especialmente útil daisyUI?

  • MVP / prototipado: cuando necesitas una pantalla funcional y atractiva rápidamente.
  • Paneles de administración / dashboards: con patrones repetidos como tablas, tarjetas e inputs.
  • Equipos pequeños / desarrolladores individuales: cuando no se dispone de tiempo para un sistema de diseño completo.
  • Servicios que dependen de temas: modo oscuro o skins de marca que se cambian con facilidad.

Consideraciones

  • Nombres de clases se añaden en el estilo daisyUI (btn, card, navbar, etc.). Verifica si entra en conflicto con la convención de tu equipo.
  • Si tu diseño necesita personalizaciones muy específicas, la base de daisyUI puede ser restrictiva, pero Tailwind permite la mayoría de ajustes y, si es necesario, puedes redefinir los componentes.

Conclusión

daisyUI es un plugin “de campo” que potencia la productividad de Tailwind. Gracias a las clases de componentes y al sistema de temas, puedes construir UI rápidamente y mantener un estilo coherente.

En la próxima publicación abordaremos:

  • Selección y personalización de temas para tu proyecto.
  • Qué son los temas en daisyUI y por qué su cambio es sencillo.

Podremos profundizar aún más en estos temas.