daisy-ui-v5

🎨 Colors and Theming

• DO NOT use the Tailwind dark: directive for colors. daisyUI manages dark mode automatically through its semantic variables.
• ALWAYS use daisyUI color names to maintain theme compatibility: primary, secondary, accent, neutral, base-100 (background), base-200, base-300, info, success, warning, error.
• For text on these colors, use the -content variation (e.g., text-primary-content on a bg-primary background).
• Use base-* colors for most of the layout and reserve primary and secondary for prominent elements and interactions.

🏗️ UI Composition and Classes Rules

1. Style Hierarchy: ALWAYS prefer native daisyUI classes (component -> part -> modifier). Use Tailwind utility classes only for specific layout customizations (flex, grid, margins, paddings) or when daisyUI doesn't offer the desired behavior.
2. Specificity: If a Tailwind utility class doesn't apply over a daisyUI component, use the ! importance modifier as a last resort (e.g., btn bg-red-500!).
3. Responsiveness: Layouts using flex or grid must be responsive using Tailwind prefixes (sm:, md:, lg:).
4. Best Practices:
   • Avoid adding bg-base-100 text-base-content directly to the <body> unless strictly necessary.
   • Do not add custom fonts unless explicitly requested.
   • If placeholder images are needed, use: https://picsum.photos/{width}/{height}.

🎯 Output Instructions