Un studio d’invitation natif de CSS qui présente les 5 thèmes sémantiques de daisyUI, les couleurs associées au contenu, les options d’adhésion par boutons radio, les commandes de plage, la validation du navigateur et une véritable étape de révision dans une boîte de dialogue.
Classes officielles de daisyUI 5.7.47 compilées avec Tailwind CSS 4.3.3 ; le comportement de l’application est en JavaScript natif. · Référence de mise en œuvre
02
Référence de conception du système de design daisyUI
daisyUI 5.7.47, conçu avec Tailwind CSS 4.3.3. Les valeurs de couleur et de géométrie indiquées appartiennent au thème Emerald fourni avec le bundle ; Lo-fi et Night définissent volontairement des valeurs différentes. La typographie et l’espacement de la page sont des choix d’origine, exprimés avec des dimensions compatibles avec Tailwind.
Classes de composants sémantiques de daisyUI sur Tailwind CSS — système de design daisyUI
Classes de composants sémantiques de CSS sur Tailwind CSS
daisyUI fournit des classes de composants au moyen d’un plugin Tailwind. Dans la version cinq, la configuration se trouve dans CSS : importez tailwindcss, puis déclarez le plugin daisyui et les thèmes activés. Cet exemple utilise btn, card, fieldset, range, checkbox, join et modal au lieu de recréer l’apparence de ces composants à l’aide de sélecteurs personnalisés.
Le plugin ne prend pas en charge la gestion de l’état de l’application. Les champs natifs, la validation du navigateur, les méthodes de dialogue et le petit module JavaScript rendent ce studio d’invitation interactif. Cette distinction compte dans le choix d’une bibliothèque : elle peut fonctionner avec plusieurs frameworks puisque sa couche de composants est CSS, mais un nom de classe ne suffit pas à mettre en œuvre une opération côté serveur.
Système de design daisyUI — associez chaque surface colorée au rôle de son contenu
Associez chaque surface colorée au rôle de son contenu
La carte d’invitation associe bg-primary et text-primary-content. La bande des rôles reprend cette association pour secondary, accent et neutral. Il s’agit de rôles sémantiques coordonnés, et non d’une palette fixe à reproduire dans chaque composant. La sélection d’un autre thème activé modifie les variables sous-jacentes sans changer le balisage de la carte.
La couleur primary d’Emerald est un vert clair, tandis que primary-content est un vert foncé. Utiliser automatiquement du texte blanc sur tous les arrière-plans primary ne respecterait pas le rôle du contenu prévu par le thème. Le tableau des spécifications reprend les valeurs OKLCH réelles du thème Emerald installé ; il ne les convertit pas en couleurs de marque hexadécimales approximatives.
Système de design daisyUI : compilez les thèmes que vous souhaitez proposer
Compilez les thèmes que vous souhaitez proposer
La configuration du plugin CSS active Emerald par défaut, ainsi que Lo-fi et Night. Un contrôle de sélection modifie data-theme sur l’élément du document. Seuls les thèmes compilés sont proposés dans le menu ; sélectionner un nom qui n’a jamais été compilé ne ferait pas apparaître le thème CSS correspondant.
Les thèmes définissent également des variables de rayon, de dimensions des champs, de bordure et d’effet. Passer d’Emerald à Lo-fi ne change donc pas seulement une nuance de couleur. Pour limiter un thème à une zone intégrée, data-theme peut être placé sur cette zone plutôt que sur html. Cet exemple autonome l’applique volontairement à tout le document.
Compilez les thèmes souhaités dans le bloc du plugin daisyUI.
Utilisez les classes sémantiques d’arrière-plan et de contenu dans le balisage du composant.
Modifiez data-theme et examinez ensemble les contrôles, les surfaces et le texte.
Système de design daisyUI : les rayons des sélecteurs, des champs et des boîtes sont distincts
Les rayons des sélecteurs, des champs et des conteneurs sont distincts
Emerald définit radius-selector à un rem, radius-field à un demi-rem et radius-box à un rem. Ses valeurs size-selector et size-field sont des unités de base d’un quart de rem utilisées dans les calculs des composants. Ces valeurs ne sont pas interchangeables avec l’espacement entre les sections de la page. Les spécifications distinguent la géométrie des composants de la mise en page d’origine de l’atelier.
La page environnante utilise une pile de polices sans sérif système, un grand titre éditorial et une composition sur deux colonnes. daisyUI n’impose pas cette hiérarchie de titres. Au point de rupture initial de 700px, la page empile l’éditeur au-dessus de l’invitation ; elle conserve tous les champs et toutes les actions au lieu de masquer des paramètres pour s’adapter à une capture d’écran.
Système de design daisyUI : une véritable entrée radio pour chaque option de groupe
Un groupe join rassemble de véritables boutons radio
Les options de format sont des boutons radio avec un nom commun et les classes join-item et btn. Sélectionner « Séance en studio » ou « Cercle en ligne » modifie l’état coché natif et le texte de l’aperçu. Une rangée de boutons stylisés sans état de sélection persistant ne représenterait pas aussi clairement ce choix exclusif.
Le champ Places utilise une entrée native de type range, de quatre à vingt-quatre, par incréments de deux. Un élément output affiche son nombre actuel, tandis que les libellés aux extrémités indiquent la taille prévue du groupe. Le contrôle du matériel est une véritable case à cocher. Son état modifie le pied de page de l’invitation, au lieu de simplement changer la couleur de la case.
Système de design daisyUI : la validation CSS respecte les contraintes du navigateur
La validation CSS respecte les contraintes du navigateur
Le champ de titre est obligatoire et comporte des limites de longueur minimale et maximale. La classe validator et validator-hint affichent l’état invalide ; c’est toujours au navigateur de faire respecter la contrainte native. Le formulaire contourne la validation en utilisant un gestionnaire de clic générique sur le bouton de vérification.
Une fois la validation standard réussie, le gestionnaire d’envoi supprime les espaces superflus du titre et vérifie sa longueur utile. Cela permet de détecter une chaîne composée d’espaces qui pourrait satisfaire minlength sans suppression préalable. Un message de validité personnalisé est effacé à la prochaine saisie, afin que le titre corrigé puisse être envoyé. Le contenu saisi par l’utilisateur est rendu avec textContent, jamais inséré en tant que HTML.
Système de design daisyUI : une véritable boîte de dialogue conserve un instantané pour vérification
Une véritable boîte de dialogue conserve un instantané pour vérification
La vérification de l’invitation copie le titre, le format, le nombre de places et le matériel actuels dans un instantané, puis appelle dialog.showModal. La classe modal fournit le style daisyUI, tandis que le navigateur assure le comportement natif de la boîte de dialogue. L’en-tête associe le libellé de la boîte de dialogue avec aria-labelledby, et la touche Échap permet de fermer la vérification sans enregistrer.
« Continuer la modification » ferme la boîte de dialogue sans modifier le formulaire. « Enregistrer le brouillon local » la ferme et annonce l’instantané exact dans une zone d’état. Le message précise qu’aucune invitation n’a été envoyée. Il ne s’agit volontairement pas de simuler la réussite d’un envoi par courriel : cet exemple ne comporte ni liste de destinataires ni service d’envoi.
Système de design daisyUI : la réinitialisation et la modification ont des effets visibles
La réinitialisation et la modification ont des effets visibles
La modification d’un champ met immédiatement la carte à jour et masque toute ancienne notification d’enregistrement. Cela évite qu’un ancien message de réussite semble décrire une invitation plus récente qui n’a pas été enregistrée. La réinitialisation attend que le navigateur ait restauré les valeurs par défaut du formulaire, puis reconstruit l’aperçu à partir de ces valeurs réelles. Le thème sélectionné séparément reste inchangé.
Le remplissage des trois formes décoratives provient de primary-content ; il s’adapte donc aux changements de thème, tout comme la typographie. L’illustration porte l’attribut aria-hidden, car elle n’apporte aucune information sur le nombre de places ou le format. Le titre et le pied de page visibles de l’aperçu contiennent les informations utiles.
Une saisie invalide empêche la vérification et signale le champ de titre.
La touche Échap ferme la vérification sans enregistrer de résultat.
Après un enregistrement, toute modification efface l’ancien résultat tout en conservant le thème sélectionné.
Système de design daisyUI : une petite version CSS avec une découverte explicite des sources
Une petite compilation CSS avec détection explicite des sources
La configuration fournie utilise l’interface en ligne de commande de Tailwind, un fichier input.css local et les trois fichiers source présentés ci-dessus. source(none) désactive l’analyse automatique générale, et la directive source explicite désigne le HTML contenant le composant et les classes utilitaires. Le CSS généré pour cet exemple dépend ainsi de son balisage réel.
Le résultat de compilation est combiné à la feuille de style de mise en page d’origine ; du JavaScript simple gère l’interaction. L’aperçu autonome intègre le résultat et ne dépend d’aucune ressource distante. Un projet Vite, Astro ou React peut utiliser son intégration Tailwind habituelle, mais doit conserver la liste des thèmes activés et inclure les fichiers source contenant les classes.
Les arrière-plans principaux sont toujours associés à du texte de contenu principal.
Le curseur reste un champ de saisie natif avec min, max et step.
La boîte de dialogue s’ouvre avec showModal, et non au moyen d’une simple classe open à visée visuelle.
Comportement du brouillon local
Aperçu en direct, instantané de révision stable, sélection du thème et validation native.
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();
Enregistrez le code d’interaction fourni sous le nom app.js.
La fenêtre d’affichage et le chargement natif des ressources sont inclus.
04
Configuration de l’agent du système de design daisyUI
Point de départ de l’implémentation
Vérifié avec daisyUI 5.7.47 et Tailwind CSS 4.3.3. L’illustration de la carte et la mise en page sont originales ; les composants CSS et les valeurs du thème Emerald sont natifs.
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 pour votre projet
Prompt pour l’agent IA
Utilisez daisyUI 5.7.47 avec la compilation Tailwind 4 fournie et les thèmes Emerald, Lo-fi et Night pour recréer le studio d’invitation. Associez les couleurs de surface sémantiques aux rôles de contenu correspondants. Conservez les champs radio natifs regroupés, le curseur du nombre de places à incréments pairs, la case à cocher des fournitures et la validation du titre. L’action « Réviser » affiche l’invitation actuelle dans une boîte de dialogue native ; « Enregistrer le brouillon local » confirme cet instantané, tandis qu’une modification ultérieure efface le message. Réinitialisez le formulaire sans modifier le thème sélectionné et ne prétendez pas que des invitations ont été envoyées.
05
Sources et périmètre du système de design daisyUI
daisyUI 5.7.47 et Tailwind CSS 4.3.3. Les valeurs Emerald sont propres au thème. Le brouillon local ne conserve pas les données et n’envoie pas d’invitations.
