papopporking-oss/opencode-nextjs-standard

Règles d'utilisation de daisyUI 5

1. Pour styliser un élément HTML, ajoutez-lui les noms de classe daisyUI. Ajoutez le nom de classe du composant nécessaire. Ajoutez également les noms de classe de partie et de modificateur applicables.
2. Si les classes daisyUI actuelles ne permettent pas d'effectuer une modification nécessaire, utilisez les classes utilitaires Tailwind CSS. Par exemple, btn px-10 définit un padding horizontal personnalisé sur un btn.
3. Si la spécificité CSS empêche une modification d'un style daisyUI, ajoutez ! à la fin de l'utilitaire Tailwind. Par exemple, btn bg-red-500! remplace la couleur d'arrière-plan d'un btn. N'utilisez cette méthode que si les autres méthodes ne fonctionnent pas. Ne l'utilisez pas fréquemment.
4. Si daisyUI ne dispose pas d'un composant applicable, créez un composant avec les utilitaires Tailwind CSS.
5. Lorsque vous utilisez flex ou grid de Tailwind CSS pour une disposition, ajoutez des préfixes d'utilitaires responsifs.
6. Utilisez uniquement les noms de classe daisyUI actuels ou les classes utilitaires Tailwind CSS.
7. Si du CSS personnalisé n'est pas nécessaire, ne l'écrivez pas. Si possible, utilisez les noms de classe daisyUI ou les classes utilitaires Tailwind CSS.
8. Si vous avez besoin d'images de substitution, utilisez https://picsum.photos/200/300 avec les dimensions nécessaires.
9. Si une police personnalisée n'est pas nécessaire, n'en ajoutez pas.
10. Si bg-base-100 text-base-content n'est pas nécessaire, ne l'ajoutez pas au body.
11. Pour les décisions de conception, utilisez les méthodes du livre Refactoring UI.
12. Si l'utilisateur ne demande pas de variante ou de couleur, utilisez la variante par défaut. Par exemple, utilisez btn pour un bouton. Si l'utilisateur ne demande pas cette variante, n'utilisez pas btn btn-primary.

Chaque nom de classe daisyUI 5 appartient à l'une de ces catégories. Ces noms de catégories sont fournis à titre de référence uniquement. Ne les utilisez pas dans le code.

• component : La classe de composant nécessaire.
• part : Une partie enfant d'un composant.
• style : Définit un style spécifié sur un composant ou une partie.
• behavior : Modifie le comportement d'un composant ou d'une partie.
• color : Définit une couleur spécifiée sur un composant ou une partie.
• size : Définit une taille spécifiée sur un composant ou une partie.
• placement : Définit une position spécifiée pour un composant ou une partie.
• direction : Définit une direction spécifiée pour un composant ou une partie.
• modifier : Modifie le composant ou la partie d'une manière spécifiée.
• variant : Un préfixe pour une classe utilitaire qui applique des styles dans des conditions spécifiées. La syntaxe est variant:utility-class.

Modifier un composant en CSS

Utilisez la directive @utility de Tailwind pour modifier un composant daisyUI globalement :

@utility btn {
  @apply rounded-full;
}

Utilitaires et variables daisyUI

• Vous pouvez utiliser les couleurs sémantiques avec les utilitaires de couleur Tailwind et les modificateurs d'opacité. Exemples : bg-primary, border-base-300 et text-base-content/60.
• rounded-box, rounded-field et rounded-selector utilisent les jetons de rayon du thème actif.
• glass applique l'effet de verre daisyUI.
• Certains composants fournissent des variables CSS pour des modifications spécifiques au composant. Countdown utilise --value et --digits. Radial progress utilise --size et --thickness.

Modules de base

daisyUI inclut les modules de base properties, rootcolor, scrollbar, rootscrolllock, rootscrollgutter et svg. Pour exclure un module de la configuration du plugin, utilisez son nom de module :

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

Utilisez include ou exclude pour les modules de bibliothèque. Pour les modifications visuelles, utilisez les utilitaires Tailwind ou @utility.