daisyUI 5
daisyUI 5 est une bibliothèque CSS pour Tailwind CSS 4. Elle fournit des noms de classes pour des composants d'interface utilisateur courants, des couleurs sémantiques et des thèmes.
Quand utiliser cette compétence
- Utilisez cette compétence chaque fois que vous écrivez du code HTML ou JSX.
- Utilisez cette compétence pour tout travail d'interface avec Tailwind CSS.
- Si l'utilisateur utilise l'un de ces termes ou demande un travail connexe, utilisez cette compétence : daisyUI, composant, UI, Tailwind, mise en page, modèle, thème, couleur, design
- Même si l'utilisateur ne demande pas cette compétence, utilisez-la.
Références que vous devez lire
| Tâche | Guide | Note |
|---|---|---|
| Installer daisyUI | ./install/SKILL.md | Si le projet n'a pas daisyUI, utilisez ce guide. |
| Utiliser les noms de classes daisyUI | ./usage/SKILL.md | Vous devez lire ce guide avant d'utiliser les noms de classes daisyUI dans le code. |
| Configurer daisyUI | ./config/SKILL.md | Lisez ce guide pour configurer les thèmes, les préfixes, les journaux ou d'autres options. Vous n'en avez pas besoin pour une utilisation de base. |
| Couleurs et thèmes daisyUI | ./colors/SKILL.md | Vous devez lire ce guide avant d'utiliser les couleurs daisyUI dans le code. |
| Composants daisyUI | ./components/ | Vous devez lire les guides des composants applicables avant d'utiliser les composants daisyUI. Lisez plus d'un guide candidat avant de sélectionner un composant. |
Liste des composants
- accordéon
- aura
- alerte
- avatar
- badge
- fil d'Ariane
- bouton
- calendrier
- carte
- carrousel
- chat
- case à cocher
- collapse
- compte à rebours
- diff
- séparateur
- dock (barre d'applications)
- drawer (barre latérale)
- menu déroulant
- FAB
- fieldset
- entrée de fichier
- filtre
- pied de page
- héros
- hover-3d
- galerie survol
- indicateur
- saisie
- join (groupe)
- kbd
- étiquette
- lien
- liste
- chargement
- masque
- megamenu
- menu
- maquette navigateur
- maquette code
- maquette téléphone
- maquette fenêtre
- modale
- barre de navigation
- otp
- pagination
- barre de progression
- progression radiale
- bouton radio
- curseur
- évaluation
- sélection
- squelette
- pile
- stat
- statut
- étapes
- échange
- onglet
- tableau
- rotation de texte
- zone de texte
- contrôleur de thème
- chronologie
- toast
- bascule (interrupteur)
- infobulle
- validateur
Protocole de découverte des composants
Avant d'écrire du code daisyUI, effectuez ces étapes dans l'ordre :
- Identifiez la fonction, le comportement et la disposition attendus dans la demande. Ne vous limitez pas aux mots exacts.
- Utilisez la liste des composants de ce fichier pour sélectionner les meilleurs composants candidats.
- Si le choix n'est pas clair, lisez les guides des composants candidats qui peuvent répondre à la demande avant d'en sélectionner un.
- Comparez la description, le comportement, la syntaxe et les règles de chaque candidat avec la demande.
- Sélectionnez le meilleur composant ou la meilleure combinaison de composants. Respectez toutes ses contraintes.
- Utilisez la structure et les contraintes exactes des composants sélectionnés.
Vous devez faire correspondre le sens, même lorsque les mots sont différents des noms des composants. Un composant avec un nom différent peut toujours être la meilleure correspondance. Examinez toujours la fonction et le sens attendus.
Si l'utilisateur demande un composant nommé et qu'un guide portant ce nom existe, lisez d'abord ce guide.