# 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 **combinar botones, tarjetas o modales cada vez que los necesitas** 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 configuración varía 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]([https://daisyui.com/docs/install/](https://daisyui.com/docs/install/))

## ¿Qué es daisyUI? {#sec-ec57db35176a}

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? {#sec-5cfe2ef052d5}

### 1) Botón primario {#sec-4563d8cf36d1}

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

```html
<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.

```html
<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 {#sec-e3b0198ef450}

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

```html
<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.

```html
<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? {#sec-e1ef69dace76}

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](/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png)

### Aplicar tema en HTML {#sec-57f1de3ec600}

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

### Ejemplo de conmutador de tema con JavaScript {#sec-7b566121ce43}

```js
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! {#sec-37cabbde5dcc}

daisyUI es ideal para capturar la forma básica y luego afinar con Tailwind.

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

```html
<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? {#sec-0d80958f4123}

* **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 {#sec-2d963d052126}

* **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 {#sec-522cfdd1fcf2}

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.