Uno strumento nativo per CSS dedicato alla creazione di inviti, che mostra i 5 temi semantici di daisyUI, i colori coordinati per i contenuti, gruppi di pulsanti radio, controlli a intervallo, convalida del browser e un vero passaggio di revisione in una finestra di dialogo.
Classi ufficiali di daisyUI 5.7.47 compilate con Tailwind CSS 4.3.3; il comportamento dell’applicazione è implementato con JavaScript puro. · Riferimento per l’implementazione
02
Riferimento di design per il sistema di design daisyUI
daisyUI 5.7.47, realizzato con Tailwind CSS 4.3.3. I valori di colore e geometria elencati appartengono al tema Emerald incluso nel bundle; Lo-fi e Night definiscono intenzionalmente valori diversi. Tipografia e spaziature della pagina sono scelte originali che usano dimensioni compatibili con Tailwind.
Classi semantiche dei componenti di sistema di design daisyUI per Tailwind CSS
Classi semantiche dei componenti di CSS per Tailwind
daisyUI fornisce classi per i componenti tramite un plugin Tailwind. Nella versione cinque la configurazione si trova in CSS: importa tailwindcss, quindi dichiara il plugin daisyui e i temi abilitati. L’esempio usa btn, card, fieldset, range, checkbox, join e modal invece di ricreare l’aspetto di quei componenti con selettori personalizzati.
Il plugin non fornisce la gestione dello stato dell’applicazione. Gli input nativi, la convalida del browser, i metodi dei dialog e il piccolo modulo JavaScript rendono interattivo questo studio per gli inviti. La distinzione è importante quando si sceglie la libreria: può funzionare con diversi framework perché il suo livello di componenti è CSS, ma il solo nome di una classe non implementa un’operazione lato server.
sistema di design daisyUI: abbina ogni superficie colorata al ruolo del suo contenuto
Abbina ogni superficie colorata al ruolo del suo contenuto
La scheda dell’invito usa insieme bg-primary e text-primary-content. La fascia dei ruoli ripropone lo stesso abbinamento per secondary, accent e neutral. Sono ruoli semantici coordinati, non un’unica palette fissa da copiare in ogni componente. Selezionando un altro tema abilitato, cambiano le variabili sottostanti senza modificare il markup della scheda.
Il colore primary di Emerald è un verde chiaro, mentre primary-content è un verde scuro. Usare automaticamente testo bianco su ogni sfondo primary ignorerebbe il ruolo del contenuto previsto dal tema. La tabella delle specifiche conserva gli effettivi valori OKLCH del tema Emerald installato; non li converte in colori esadecimali del marchio ipotizzati.
sistema di design daisyUI: compila i temi che intendi offrire
Compila i temi che intendi offrire
La configurazione del plugin CSS abilita Emerald come tema predefinito, oltre a Lo-fi e Night. Un controllo select modifica data-theme sull’elemento del documento. Nel menu sono disponibili solo i temi compilati; selezionare un nome di un tema mai compilato non farebbe comparire il tema corrispondente di CSS.
I temi comprendono anche variabili per raggio, dimensioni dei campi, bordi ed effetti. Passare da Emerald a Lo-fi, quindi, modifica più di un semplice campione di colore. Per applicare un tema a una regione incorporata, si può impostare data-theme su quella regione invece che su html. Questo esempio autonomo lo applica intenzionalmente all’intero documento.
Compila i temi desiderati nel blocco del plugin daisyUI.
Usa nel markup dei componenti le classi semantiche per sfondo e contenuto.
Modifica data-theme e osserva insieme controlli, superfici e testo.
sistema di design daisyUI: i raggi di selettori, campi e riquadri sono distinti
I raggi di selettori, campi e riquadri sono distinti
Emerald definisce radius-selector a un rem, radius-field a mezzo rem e radius-box a un rem. Le variabili size-selector e size-field sono unità di base di un quarto di rem usate nei calcoli dei componenti. Questi valori non sono intercambiabili con la spaziatura tra le sezioni della pagina. Le specifiche distinguono la geometria dei componenti dal layout originale dell’area di lavoro.
La pagina circostante usa una pila di font sans-serif di sistema, un grande titolo editoriale e una struttura a due colonne. daisyUI non richiede questa gerarchia dei titoli. Al breakpoint originale di 700px, la pagina dispone l’editor sopra l’invito; mantiene ogni campo e azione invece di nascondere le impostazioni per adattarsi a uno screenshot.
Sistema di design daisyUI: opzioni di gruppo con input radio reali
Un gruppo Join racchiude veri input radio
Le opzioni di formato sono input radio con lo stesso nome e le classi join-item e btn. Selezionando Studio session o Online circle cambia lo stato checked nativo e il testo dell’anteprima. Una riga di pulsanti stilizzati senza uno stato di selezione persistente non rappresenterebbe altrettanto chiaramente questa scelta esclusiva.
Il controllo Posti usa un input range nativo da quattro a ventiquattro, con incrementi di due. Un elemento output ne mostra il numero corrente, mentre le etichette agli estremi indicano le dimensioni previste per l’incontro. Il controllo dei materiali è una vera casella di controllo. Il suo stato modifica il piè di pagina dell’invito, non solo il colore della casella.
Sistema di design daisyUI: la validazione di CSS rispecchia i vincoli del browser
CSS La convalida rispetta i vincoli del browser
Il campo del titolo è obbligatorio e ha vincoli di lunghezza minima e massima. Le classi validator e validator-hint mostrano lo stato non valido; spetta comunque al browser applicare il vincolo nativo. Il modulo non aggira la convalida con un gestore generico dell’evento click sul pulsante di revisione.
Dopo il superamento della convalida standard, il gestore dell’invio rimuove gli spazi superflui dal titolo e ne verifica la lunghezza effettiva. In questo modo intercetta una sequenza di spazi che potrebbe soddisfare un minlength senza prima essere ripulita. Un messaggio di convalida personalizzato viene cancellato al successivo evento input, così il titolo corretto può essere inviato. Il contenuto dell’utente viene visualizzato tramite textContent, mai inserito come HTML.
Sistema di design daisyUI: una finestra di dialogo reale conserva un’istantanea per la revisione
Una finestra di dialogo reale conserva un’istantanea per la revisione
Rivedi invito copia il titolo, il formato, i posti e i materiali correnti in un’istantanea, quindi chiama dialog.showModal. La classe modal fornisce lo stile daisyUI, mentre il browser gestisce il comportamento nativo della finestra di dialogo. L’intestazione la identifica tramite aria-labelledby e il tasto Escape consente di chiudere la revisione senza salvare.
Continua a modificare chiude la finestra di dialogo e lascia invariato il modulo. Salva bozza locale la chiude e annuncia l’istantanea esatta in un’area di stato. Il messaggio specifica che non è stato inviato alcun invito. Non si simula volutamente l’invio di un’email: l’esempio non prevede né un elenco di destinatari né un servizio di invio.
Sistema di design daisyUI: il ripristino e le modifiche hanno effetti visibili
Il ripristino e le modifiche hanno effetti visibili
Modificare un campo aggiorna immediatamente la scheda e nasconde un eventuale avviso di salvataggio precedente. In questo modo un messaggio di successo ormai superato non sembra riferirsi a un invito più recente e non salvato. Il ripristino attende che il browser abbia recuperato i valori predefiniti del modulo, quindi ricrea l’anteprima a partire da quei valori effettivi. Il tema selezionato separatamente rimane invariato.
Il riempimento delle tre forme decorative deriva da primary-content, quindi si aggiorna al cambio di tema insieme alla tipografia. L’illustrazione è contrassegnata con aria-hidden perché non fornisce informazioni su posti o formato. I contenuti significativi sono nel titolo e nel piè di pagina visibili dell’anteprima.
L’input non valido impedisce la revisione e segnala il campo del titolo.
Escape chiude la revisione senza generare un risultato salvato.
Dopo il salvataggio, le modifiche cancellano il vecchio risultato e mantengono il tema corrente.
Sistema di design daisyUI: una piccola build di CSS con individuazione esplicita delle sorgenti
Una build CSS essenziale con rilevamento esplicito delle sorgenti
La configurazione fornita usa la CLI di Tailwind, un file input.css locale e i tre file sorgente mostrati sopra. source(none) disattiva la scansione automatica estesa e la direttiva source esplicita indica il HTML che contiene il componente e le classi utility. In questo modo il CSS generato per l’esempio dipende dal markup effettivamente utilizzato.
L’output della build viene combinato con il foglio di stile originale del layout; plain JavaScript gestisce le interazioni. L’anteprima autonoma incorpora il risultato e non ha dipendenze remote. Anche un progetto Vite, Astro o React può usare la normale integrazione Tailwind, ma dovrebbe mantenere l’elenco dei temi abilitati e assicurarsi di includere i file sorgente che contengono le classi.
Gli sfondi primari sono sempre abbinati al testo primary-content.
Il range rimane un input nativo con min, max e step.
La finestra di dialogo si apre con showModal, non con una classe open puramente visiva.
Comportamento della bozza locale
Anteprima in tempo reale, istantanea stabile per la revisione, selezione del tema e convalida 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();
Salva il codice fornito per le interazioni come app.js.
Sono inclusi il viewport e il caricamento nativo delle risorse.
04
daisyUI Configurazione dell’agent per il sistema di design
Punto di partenza per l’implementazione
Verificato con daisyUI 5.7.47 e Tailwind CSS 4.3.3. L’illustrazione della scheda e il layout della pagina sono originali; i valori di CSS dei componenti e del tema Emerald sono nativi.
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. */
Un prompt per il tuo progetto
Prompt per l’agente
Usa daisyUI 5.7.47 con la build Tailwind 4 fornita e i temi Emerald, Lo-fi e Night per riprodurre lo studio degli inviti. Abbina i colori semantici delle superfici ai rispettivi ruoli del contenuto. Mantieni gli input radio nativi raggruppati, il range dei posti con incrementi pari, la casella dei materiali e la convalida del titolo. Rivedi acquisisce l’invito corrente in una finestra di dialogo nativa; Salva bozza locale conferma quell’istantanea, mentre le modifiche successive cancellano il messaggio. Ripristina il modulo senza modificare il tema selezionato e non dichiarare che gli inviti sono stati inviati.
05
daisyUI Fonti e ambito del sistema di design
daisyUI 5.7.47 e Tailwind CSS 4.3.3. I valori Emerald dipendono dal tema. La bozza locale non conserva i dati né invia inviti.
