Un estudio de invitaciones nativo de CSS que muestra los temas semánticos 5 de daisyUI, colores de contenido emparejados, grupos de botones de opción, controles de rango, validación del navegador y un paso de revisión con un diálogo real.
Clases oficiales de daisyUI 5.7.47 compiladas con Tailwind CSS 4.3.3; el comportamiento de la aplicación se implementa con JavaScript sin bibliotecas. · Referencia de implementación
02
Referencia de diseño del sistema de diseño de daisyUI
daisyUI 5.7.47, creado con Tailwind CSS 4.3.3. Los valores de color y geometría enumerados corresponden al tema Emerald incluido en el paquete; Lo-fi y Night definen valores distintos deliberadamente. La tipografía y el espaciado de la página son elecciones originales que usan dimensiones compatibles con Tailwind.
Clases semánticas de componentes del sistema de diseño de daisyUI sobre Tailwind CSS
Clases semánticas de componentes de CSS sobre Tailwind
daisyUI proporciona clases de componentes mediante un complemento de Tailwind. En la versión cinco, la configuración se encuentra en CSS: importa tailwindcss y, a continuación, declara el complemento daisyui y los temas habilitados. El ejemplo usa btn, card, fieldset, range, checkbox, join y modal, en lugar de recrear la apariencia de esos componentes con selectores propios.
El complemento no proporciona la gestión del estado de la aplicación. Las entradas nativas, la validación del navegador, los métodos del diálogo y el pequeño módulo JavaScript hacen que este estudio de invitaciones sea interactivo. Esta distinción es importante al elegir la biblioteca: puede funcionar con varios frameworks porque su capa de componentes es CSS, pero un nombre de clase por sí solo no implementa una operación en el servidor.
Sistema de diseño de daisyUI: combina cada superficie de color con el rol de su contenido
Combina cada superficie de color con el rol de su contenido
La tarjeta de invitación combina bg-primary y text-primary-content. La franja de roles repite este emparejamiento para secondary, accent y neutral. Son roles semánticos coordinados, no una única paleta fija que haya que copiar en cada componente. Al seleccionar otro tema habilitado, cambian las variables subyacentes sin que cambie el marcado de la tarjeta.
El color primario de Emerald es verde claro y su color de contenido primario es verde oscuro. Usar automáticamente texto blanco en todos los fondos primarios ignoraría la función prevista para el contenido en este tema. La tabla de especificaciones conserva los valores OKLCH reales del tema Emerald instalado; no los convierte en colores de marca hexadecimales inventados.
Sistema de diseño daisyUI: compila los temas que quieras ofrecer
Compila los temas que quieras ofrecer
La configuración del complemento CSS habilita Emerald como tema predeterminado, además de Lo-fi y Night. Un control de selección cambia data-theme en el elemento del documento. El menú solo ofrece los temas compilados; seleccionar un nombre cuyo tema nunca se compiló no hará aparecer el CSS correspondiente.
Los temas también incluyen variables de radio, tamaño de campos, bordes y efectos. Por eso, cambiar de Emerald a Lo-fi modifica mucho más que una muestra de color. Para aplicar un tema a una región integrada, se puede colocar data-theme en esa región en lugar de en html. Este ejemplo independiente lo aplica deliberadamente a todo el documento.
Compila los temas previstos en el bloque del complemento daisyUI.
Usa clases semánticas de fondo y contenido en el marcado de los componentes.
Cambia data-theme y observa en conjunto los controles, las superficies y el texto.
Sistema de diseño daisyUI: los radios de selectores, campos y contenedores son distintos
Los radios de selector, campo y caja son independientes
Emerald define radius-selector como un rem, radius-field como medio rem y radius-box como un rem. Sus valores size-selector y size-field son unidades base de un cuarto de rem que se usan en los cálculos de los componentes. Estos valores no son intercambiables con el espacio entre las secciones de una página. La especificación separa la geometría de los componentes de la distribución original del área de trabajo.
La página que rodea el ejemplo usa una pila de fuentes sans serif del sistema, un título editorial grande y una composición de dos columnas. daisyUI no exige esa jerarquía de titulares. En el punto de quiebre original de 700px, la página apila el editor sobre la invitación y conserva todas las entradas y acciones, en lugar de ocultar ajustes para que quepan en una captura de pantalla.
Sistema de diseño daisyUI: los grupos join usan controles de opción reales
Join agrupa entradas de radio reales
Las opciones de formato son controles de opción con un mismo name y las clases join-item y btn. Al seleccionar «Sesión en el estudio» o «Círculo en línea», cambia el estado seleccionado nativo y el texto de la vista previa. Una fila de botones con estilo, pero sin un estado de selección persistente, no representaría esta elección mutuamente excluyente con la misma claridad.
El control «Plazas» usa una entrada nativa de tipo range, de cuatro a veinticuatro, en incrementos de dos. Un elemento output muestra el número actual y las etiquetas de los extremos explican el tamaño previsto de la reunión. El control de materiales es una casilla de verificación real. Su estado modifica el pie de la invitación, en lugar de limitarse a cambiar el color de la casilla.
Sistema de diseño daisyUI: la validación CSS refleja las restricciones del navegador
La validación de CSS refleja las restricciones del navegador
El campo del título es obligatorio y tiene límites de longitud mínima y máxima. Las clases validator y validator-hint muestran el estado no válido; el navegador sigue siendo responsable de aplicar la restricción nativa. El formulario no elude la validación mediante un controlador genérico de clic en el botón de revisión.
Una vez superada la validación habitual, el controlador de envío recorta los espacios del título y comprueba su longitud significativa. Así se detecta una cadena compuesta solo por espacios, que podría cumplir el atributo minlength si no se recortara. El siguiente evento de entrada borra el mensaje de validez personalizado para permitir el envío del título corregido. El contenido del usuario se muestra mediante textContent y nunca se inserta como HTML.
Sistema de diseño daisyUI: un diálogo real conserva una instantánea de la revisión
Un diálogo real conserva una instantánea de la revisión
Al revisar la invitación, se copian el título, el formato, las plazas y los materiales actuales en una instantánea; después se llama a dialog.showModal. La clase modal proporciona el estilo de daisyUI, mientras que el navegador ofrece el comportamiento nativo del diálogo. El encabezado etiqueta el diálogo mediante aria-labelledby, y Escape permite cerrar la revisión sin guardar.
«Seguir editando» cierra el diálogo y deja el formulario sin cambios. «Guardar borrador local» lo cierra y anuncia la instantánea exacta en una región de estado. El mensaje indica que no se enviaron invitaciones. Esto no simula deliberadamente que se haya enviado un correo electrónico correctamente: el ejemplo no tiene una lista de destinatarios ni un servicio de envío.
Sistema de diseño daisyUI: restablecer y editar producen cambios observables
Restablecer y editar producen cambios observables
Al cambiar un campo, la tarjeta se actualiza de inmediato y se oculta cualquier aviso de guardado anterior. Así se evita que un mensaje de éxito obsoleto parezca referirse a una invitación más reciente que aún no se ha guardado. Al restablecer, se espera a que el navegador restaure los valores predeterminados del formulario y, después, se vuelve a generar la vista previa con esos valores reales. El tema seleccionado por separado se mantiene.
El relleno de la ilustración decorativa de tres formas se basa en primary-content, por lo que responde a los cambios de tema junto con la tipografía. Se marca como aria-hidden porque no aporta información sobre las plazas ni el formato. El título y el pie visibles de la vista previa contienen la información relevante.
Las entradas no válidas impiden revisar la invitación e identifican el campo del título.
Escape cierra la revisión sin generar un resultado de guardado.
Si se edita después de guardar, se borra el resultado anterior y se conserva el tema actual.
Sistema de diseño daisyUI: una compilación pequeña CSS con descubrimiento explícito de fuentes
Una compilación pequeña de CSS con detección explícita de fuentes
La configuración proporcionada usa la CLI de Tailwind, un archivo input.css local y los tres archivos de origen que se muestran arriba. source(none) desactiva el escaneo automático general, y la directiva source explícita apunta al HTML que contiene el componente y las clases de utilidad. Así, el CSS generado por el ejemplo depende de su marcado real.
El resultado de la compilación se combina con la hoja de estilos original de la distribución; JavaScript sin formato se encarga de la interacción. La vista previa independiente incluye el resultado en línea y no tiene dependencias remotas. Un proyecto de Vite, Astro o React puede usar la integración habitual de Tailwind, pero debe conservar la lista de temas habilitados y asegurarse de incluir los archivos de origen que contienen las clases.
Los fondos primarios siempre se combinan con texto primary-content.
El control range sigue siendo una entrada nativa con min, max y step.
El diálogo se abre mediante showModal, no con una clase open que solo afecta a la apariencia.
Comportamiento del borrador local
Vista previa en vivo, instantánea estable para revisión, selección de tema y validación nativa.
javascript
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
Se incluyen la ventana gráfica y la carga de recursos nativos.
04
Configuración del agente de IA del sistema de diseño daisyUI
Punto de partida para la implementación
Verificado con daisyUI 5.7.47 y Tailwind CSS 4.3.3. La ilustración de la tarjeta y el diseño de la página son originales; los valores de los componentes CSS y del tema Emerald son nativos.
css
/* npm install -D [email protected] @tailwindcss/[email protected][email protected] */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
Una instrucción para tu proyecto
Instrucción para el agente
Usa daisyUI 5.7.47 con la compilación de Tailwind 4 proporcionada y los temas Emerald, Lo-fi y Night para reproducir el estudio de invitaciones. Combina los colores semánticos de superficie con las funciones de contenido correspondientes. Conserva los botones de opción nativos agrupados, el rango de asientos con incrementos pares, la casilla de verificación de materiales y la validación del título. La revisión muestra la invitación actual en un diálogo nativo; Guardar borrador local confirma esa instantánea, mientras que cualquier edición posterior borra el mensaje. Restablece el formulario sin alterar el tema seleccionado y no afirmes que se enviaron invitaciones.
05
Fuentes y alcance del sistema de diseño daisyUI
daisyUI 5.7.47 y Tailwind CSS 4.3.3. Los valores de Emerald son específicos del tema. El borrador local no guarda datos de forma persistente ni envía invitaciones.
