papopporking-oss/opencode-nextjs-standard

daisyUI 5 Nutzungsregeln

1. Um ein HTML-Element zu stylen, füge die entsprechenden daisyUI-Klassennamen hinzu. Ergänze den erforderlichen Komponenten-Klassennamen sowie die passenden Part- und Modifier-Klassennamen.
2. Wenn die aktuellen daisyUI-Klassen keine notwendige Änderung ermöglichen, verwende Tailwind CSS Utility-Klassen. Beispiel: btn px-10 setzt einen benutzerdefinierten horizontalen Innenabstand auf einer btn.
3. Wenn die CSS-Spezifität eine Änderung an einem daisyUI-Style verhindert, hänge ein ! an das Ende der Tailwind-Utility an. Beispiel: btn bg-red-500! überschreibt die Hintergrundfarbe einer btn. Verwende diese Methode nur, wenn andere Methoden nicht funktionieren. Nutze sie nicht häufig.
4. Wenn daisyUI keine passende Komponente hat, erstelle eine Komponente mit Tailwind CSS Utilities.
5. Wenn du Tailwind CSS flex oder grid für ein Layout verwendest, füge responsive Utility-Präfixe hinzu.
6. Verwende ausschließlich aktuelle daisyUI-Klassennamen oder Tailwind CSS Utility-Klassen.
7. Wenn benutzerdefiniertes CSS nicht notwendig ist, schreibe es nicht. Verwende wenn möglich daisyUI-Klassennamen oder Tailwind CSS Utility-Klassen.
8. Wenn du Platzhalterbilder benötigst, verwende https://picsum.photos/200/300 mit den erforderlichen Abmessungen.
9. Wenn eine benutzerdefinierte Schriftart nicht notwendig ist, füge keine hinzu.
10. Wenn bg-base-100 text-base-content nicht notwendig ist, füge es nicht zum <body> hinzu.
11. Für Designentscheidungen verwende die Methoden aus dem Buch Refactoring UI.
12. Wenn der Benutzer keine Variante oder Farbe anfordert, verwende die Standardvariante. Verwende zum Beispiel btn für einen Button. Wenn der Benutzer diese Variante nicht explizit wünscht, verwende nicht btn btn-primary.

Jeder daisyUI 5 Klassenname gehört zu einer dieser Kategorien. Diese Kategorienamen dienen nur als Referenz. Verwende sie nicht im Code.

• component: Der erforderliche Komponenten-Klassennamen.
• part: Ein untergeordneter Teil einer Komponente.
• style: Setzt einen bestimmten Style auf einer Komponente oder einem Part.
• behavior: Ändert das Verhalten einer Komponente oder eines Parts.
• color: Setzt eine bestimmte Farbe auf einer Komponente oder einem Part.
• size: Setzt eine bestimmte Größe auf einer Komponente oder einem Part.
• placement: Setzt eine bestimmte Position für eine Komponente oder einen Part.
• direction: Setzt eine bestimmte Richtung für eine Komponente oder einen Part.
• modifier: Ändert die Komponente oder den Part auf eine bestimmte Weise.
• variant: Ein Präfix für eine Utility-Klasse, die Styles unter bestimmten Bedingungen anwendet. Die Syntax lautet variant:utility-class.

Eine Komponente in CSS ändern

Verwende die Tailwind-@utility-Direktive, um eine daisyUI-Komponente global zu ändern:

@utility btn {
  @apply rounded-full;
}

daisyUI Utilities und Variablen

• Du kannst semantische Farben mit Tailwind-Farb-Utilities und Opazitäts-Modifikatoren verwenden. Beispiele sind bg-primary, border-base-300 und text-base-content/60.
• rounded-box, rounded-field und rounded-selector verwenden die Radius-Token des aktiven Themes.
• glass wendet den daisyUI-Glaseffekt an.
• Einige Komponenten stellen CSS-Variablen für komponentenspezifische Änderungen bereit. Countdown verwendet --value und --digits. Radial Progress verwendet --size und --thickness.

Basis-Module

daisyUI enthält die Basis-Module properties, rootcolor, scrollbar, rootscrolllock, rootscrollgutter und svg. Um ein Modul von der Plugin-Konfiguration auszuschließen, verwende seinen Modulnamen:

@plugin "daisyui" {
  exclude: rootscrollgutter;
}

Verwende include oder exclude für Bibliotheksmodule. Für visuelle Änderungen verwende Tailwind-Utilities oder @utility.