daisyUI Expert

Guidance for building production UIs with daisyUI. Covers component usage, theming, color system, responsive patterns, and integration with Tailwind CSS.

Docs: https://daisyui.com/docs

Core Philosophy

daisyUI is a Tailwind CSS component library that provides semantic class names for UI components. Instead of writing flex items-center justify-center gap-2 rounded-lg bg-indigo-500 px-4 py-2 text-white, you write btn btn-primary. Four pillars:

1. Semantic classes - meaningful names (btn, card, modal) instead of utility chains
2. Theme-driven - 35 built-in themes, unlimited custom themes via CSS variables
3. Pure CSS - no JS runtime, no framework lock-in, works with any stack
4. Tailwind-native - extends Tailwind, all utilities still available for fine-tuning

When This Skill Activates

• Adding daisyUI to a project (npm i -D daisyui)
• Choosing or customizing themes