Use Tailwind and DaisyUI for styling applications. Covers utility-first styling, component usage.
Use this skill when adding or changing styling in ERB or Svelte.
Use class_names for conditional classes.
Good:
<div class="<%= class_names('mb-5', active: item.for_sale?) %>">
Bad:
<div class="mb-5 <%= item.for_sale? ? 'active' : '' %>">
Prefer Svelte class directives over interpolated class strings.
Good:
<input
class="file-input file-input-bordered w-full"
class:file-input-error={errors['image']}
>
Bad:
<input class="file-input file-input-bordered w-full {errors['image'] ? 'file-input-error' : ''}">
Invoke this skill when: