daisyUI
Para construir interfaces con componentes ya estilizados sobre Tailwind CSS sin escribir decenas de utilidades.
Plugin de Tailwind CSS que añade clases de componentes listos para usar, como btn o card.
Notas y contexto
Qué es
daisyUI es un plugin gratuito y de código abierto para Tailwind CSS, creado y mantenido por Pouya Saadeghi. Añade nombres de clase semánticos para componentes (como btn, card, modal o toggle), de modo que en lugar de encadenar decenas de utilidades de Tailwind escribes una sola clase. Es la librería de componentes para Tailwind más popular, con más de 65 componentes y más de 35 temas predefinidos basados en variables CSS.
Para qué sirve
- Acelerar el maquetado con componentes ya estilizados (botones, tarjetas, modales, formularios, navegación).
- Mantener un HTML más limpio y legible al sustituir largas cadenas de utilidades por clases semánticas.
- Aplicar y cambiar temas de color de forma centralizada mediante variables CSS, incluyendo modo claro y oscuro.
- Personalizar la apariencia generando temas propios sin tener que escribir CSS adicional.
Cuándo usarlo
Es ideal cuando ya trabajas con Tailwind CSS y quieres avanzar rápido sin renunciar a la personalización por utilidades. A diferencia de librerías headless como Radix UI o Headless UI, que aportan comportamiento sin estilos, daisyUI entrega componentes con apariencia lista para producir. Si necesitas componentes con lógica de accesibilidad e interacción muy elaborada (focus trap, navegación por teclado completa), conviene combinarlo con una librería headless o framework de componentes.
Ejemplo
Instalación con Tailwind CSS v4:
npm i -D daisyui@latestEn tu archivo CSS principal:
@import "tailwindcss";
@plugin "daisyui";Uso de un componente en el marcado:
<button class="btn btn-primary">Aceptar</button>Esa única clase reemplaza a la veintena de utilidades de Tailwind que harían falta para el mismo botón.
Puntos clave
- Funciona como plugin de Tailwind, tanto en la v3 como en la v4 (con la directiva @plugin).
- Más de 65 componentes y más de 35 temas predefinidos (light, dark, cupcake, cyberpunk, dracula, etc.).
- Temas basados en variables CSS, con generador visual para crear los tuyos.
- Las clases de daisyUI conviven con las utilidades de Tailwind, así que puedes ajustar cualquier detalle.
Ten en cuenta
Es una capa de estilos sobre Tailwind: requiere tenerlo instalado y configurado. No aporta lógica de interacción ni de estado, por lo que para comportamientos complejos necesitarás JavaScript propio o una librería headless. El proyecto está activo y se publica bajo licencia MIT.