Install DaisyUI for Phoenix Framework

How to install daisyUI in a Phoenix Framework project.

1. Upgrade Phoenix Framework to use Tailwindcss v4

You should upgrade your project’s tailwind dependency to 0.3 to have the latest tailwindcss v4 on your Phoenix project. The instructions are available at the official tailwindcss docs.

You can also remove the tailwind.config.js file and switch to the new CSS based configuration. For more information, see the documentation on functions and directives.

2. Add daisyUI

First, move to your project’s “assets/” folder and then install the latest daisyui by using npm.

npm init -y
npm install daisyui@latest

Then, edit the app.css file located inside your phoenix project at “assets/css/app.css” and add the daisyui plugin.

1@import "tailwindcss";
2@plugin "daisyui";

3. Start using daisyUI in your Phoenix views

Example: Create a daisyUI button in a phoenix view file.

1<button class="btn btn-primary">Hello daisyUI!</button>