Removing Daisy UI from Phoenix

New Phoenix projects ship with Daisy UI by default, but you might want something else. Personally, I’m a fan of the Fluxon UI library and don’t need Daisy. Luckily, it’s really simple to remove Daisy UI from your project.

Start with the CSS file. Open assets/css/app.css and remove the Daisy UI plugin declarations:

@plugin "../vendor/daisyui" { ... }
@plugin "../vendor/daisyui-theme" { ... }

There is two theme declarations, light and dark, that you would want to remove…

Next, clean up the vendor files. Delete these files from assets/vendor/:

• daisyui.js
• daisyui-theme.js

If you want to make it really clean, update the documentation in lib/your_app_web/components/core_components.ex. The module comment mentions Daisy UI and links to their documentation. Remove these references and keep only the Tailwind CSS information.

Run mix assets.build to verify everything compiles. If your build succeeds, you’re done. Your Phoenix app now runs on pure Tailwind CSS without Daisy UI’s component classes and themes.

Permalink

Taste

When AI can generate anything in seconds, taste becomes everything. How to avoid creating slop and build something beautiful in the age of cheap generation....

Read more

The world's simplest database migrations

A delightfully simple way to run your database migrations with PostgreSQL functions. You only need one file and it's so fast you can even run it at application startup...

Read more

Running to think

For a few years now, I've been partaking in the age-old ritual of running. I began my journey like many others, swathed in quality athletic wear and armed with a meticulous training schedule...

Read more