Remove DaisyUI from Phoenix Project

This skill removes DaisyUI from a Phoenix project while keeping Tailwind CSS and preserving all component structure and logic as unstyled examples.

Workflow Overview

1. Discover DaisyUI usage - Find all vendor files, CSS imports, and CSS class references
2. Delete vendor files - Remove daisyui.js and daisyui-theme.js from assets/vendor/
3. Clean app.css - Remove DaisyUI plugin imports and theme definitions
4. Strip components - Remove DaisyUI classes from core_components.ex, layouts, and templates
5. Verify - Run mix precommit to ensure everything compiles

Step 1: Discover DaisyUI Usage

Run the discovery script:

elixir phx-remove-daisyui/scripts/discover_daisyui.exs [project_root]

Or manually search for all DaisyUI references:

# Find vendor files
ls assets/vendor/daisyui*.js

# Find CSS imports
grep -r "daisyui" assets/css/

# Find DaisyUI classes in code
grep -r "btn-\|alert-\|toast\|badge\|card \|table-\|checkbox\|select-\|textarea-\|input-\|navbar\|dropdown\|drawer\|modal\|menu\|tabs\|stat\|kbd\|progress\|avatar\|divider\|carousel\|hero \|stack\|steps\|toggle\|fileinput\|mask\|diff\|status\|fieldset\|label \|rounded-box\|bg-base-\|border-base-\|text-base-" lib/

Common DaisyUI classes to remove:

• Buttons: btn, btn-primary, btn-secondary, btn-ghost, btn-soft, btn-outline, btn-sm, btn-lg
• Alerts/Flash: alert, alert-info, alert-error, alert-success, alert-warning, toast, toast-top, toast-end
• Forms: input, input-error, select, select-error, textarea, textarea-error, checkbox, checkbox-sm, fieldset, label, form-control
• Layout: card, navbar, footer, drawer, modal, dropdown, menu, tabs, tab
• Data display: table, table-zebra, badge, badge-sm, badge-warning, list, list-row, stat, steps
• Theme colors: bg-base-100, bg-base-200, bg-base-300, border-base-*, text-base-content*
• Misc: rounded-box, hero-* (icon classes are OK if using heroicons plugin)

Step 2: Delete Vendor Files

Remove the DaisyUI vendor files:

rm -f assets/vendor/daisyui.js
rm -f assets/vendor/daisyui-theme.js

Step 3: Clean app.css

Edit assets/css/app.css to remove DaisyUI plugin imports and theme definitions.

Remove these sections:

1. The @plugin "../vendor/daisyui" block
2. All @plugin "../vendor/daisyui-theme" blocks (there may be multiple for light/dark themes)
3. Any @custom-variant dark that references [data-theme=...]

Keep:

• The Tailwind CSS import (@import "tailwindcss" source(none);)
• The @source directives
• The Heroicons plugin (if present)
• LiveView custom variants (phx-click-loading, phx-submit-loading, phx-change-loading)
• Any custom CSS you want to preserve

Optional: Add a placeholder @layer base block where the user can add their own custom theme variables later.

Step 4: Strip DaisyUI Classes from Components

core_components.ex

For each component function, remove DaisyUI classes while preserving:

• Component structure and logic
• Phoenix.LiveView.JS commands
• Form field handling
• Error message rendering
• Slot rendering

Key transformations:

Pattern for editing:

# Before
<div class="fieldset mb-2">
  <label>
    <span :if={@label} class="label mb-1">{@label}</span>
    <input class={[@class || "w-full input", @errors != [] && (@error_class || "input-error")]} />
  </label>
</div>

# After  
<div>
  <label>
    <span :if={@label}>{@label}</span>
    <input class={[@class, @errors != [] && @error_class]} />
  </label>
</div>

layouts.ex

Apply the same pattern to lib/foolish_web/components/layouts.ex:

Common components to update:

• app/1 - Remove navbar, padding classes, layout classes from header/main wrappers
• theme_toggle/1 - Remove card, border-base-*, bg-base-*, rounded-full, button styling classes
• flash_group/1 - Usually just calls flash/1, no changes needed there

Templates (.html.heex files)

Search all HEEx templates and remove DaisyUI classes:

# Find all HEEx files with DaisyUI classes
grep -r "btn-\|alert-\|badge\|card \|table-\|bg-base-\|text-base-" lib/**/*\.html\.heex

Common patterns:

• Remove badge, badge-warning, badge-sm → keep only non-DaisyUI classes
• Remove rounded-box, bg-base-200, hover:bg-base-200 → keep structure
• Remove fill-base-content/40, group-hover:fill-base-content → keep SVG structure
• Remove text-base-content/70, text-base-content/80 → keep text content

Step 5: Update Theme System (if present)

If the project has a theme toggle system using data-theme attributes:

root.html.heex - The theme toggle JavaScript can stay as-is since it just sets a data-theme attribute. However, without DaisyUI CSS variables, the theme switching won't have any effect until the user builds their own theme system.

You can either:

1. Leave it - The infrastructure is there for the user to build on
2. Simplify it - Remove the theme toggle if it's no longer functional
3. Convert to dark mode - Replace with Tailwind's dark: class system

Default to option 1 (leave it) unless the user specifies otherwise.

Step 6: Verify

Run the precommit checks:

mix precommit

This compiles the project, runs tests, and ensures everything still works.

Output

After completion:

• ✅ DaisyUI vendor files deleted
• ✅ DaisyUI CSS plugins removed from app.css
• ✅ All DaisyUI classes stripped from components
• ✅ Component structure and logic preserved as unstyled examples
• ✅ Tailwind CSS still functional
• ✅ All tests pass

The user now has a clean slate to build their own custom theme system using Tailwind CSS utilities and custom CSS variables.

Notes

• Heroicons: The hero-* icon classes should remain if the project uses the heroicons Tailwind plugin (check for @plugin "../vendor/heroicons" in app.css)
• Custom classes: If you see custom classes that aren't DaisyUI (e.g., project-specific utility classes), leave them alone
• Tailwind utilities: Standard Tailwind classes (flex, grid, px-4, py-2, rounded, shadow, etc.) should remain - only remove DaisyUI-specific component classes
• CSS variables: DaisyUI uses CSS variables like --color-base-100, var(--color-primary), etc. These won't work after removal but don't need explicit cleanup - they'll just be unused