| name | daisyui |
| description | Build and refactor Rails ERB UI with Tailwind CSS v4 + daisyUI v5 in this repository. Use when creating pages, panels, forms, and buttons with consistent theme classes and responsive behavior. |
| argument-hint | What screen or component should be built or restyled with daisyUI? |
daisyUI Workflow For Narrativerse
Outcome
Produce production-ready UI updates in Rails views using daisyUI + Tailwind that match this project's visual language and compile cleanly.
When To Use
- Building or restyling ERB views and partials
- Creating consistent forms, panels, cards, and action rows
- Updating theme-aware classes for light/dark support
- Fixing Tailwind/daisyUI styling regressions
Procedure
- Confirm the target file and UX goal.
- Inspect nearby view patterns first so new markup stays consistent.
- Apply daisyUI component classes in ERB templates (for example
btn, card, badge, link).
- Add project-specific styling in
app/assets/stylesheets/application.tailwind.css.
- Use
@apply with Tailwind utility classes only.
- Keep generated CSS untouched; do not hand-edit
app/assets/builds/application.css.
- Verify desktop and mobile layouts after the change.
- Rebuild CSS and check for compile issues.
Decision Points
- If a style can be expressed with existing daisyUI classes: keep it in template markup.
- If a custom pattern repeats across multiple views: create a semantic class in
application.tailwind.css and compose it from Tailwind utilities.
- If a one-off tweak is needed in one view: keep it inline with utility classes in that template.
- If build fails with
unknown utility around daisyUI component names: remove component-class usage from @apply and move those classes back into ERB markup.
Quality Checks
- Uses Tailwind v4 + daisyUI v5 compatible patterns
- Take reusable class sets into
@apply
- Visual consistency with existing theme variables and component styling
- Works on desktop and mobile
- CSS build succeeds without warnings/errors
Resources
Validation Commands
