DaisyUI and Phoenix

A couple of days ago the Phoenix team approved a PR which added DaisyUI to the default template of an Phoenix App:
https://github.com/phoenixframework/phoenix/pull/6123

I've always disliked Tailwind by itself. It has noble intentions but the result of using Tailwind is messy, verbose components that lose the meaning of the applied classes. To combat this I typically use component framework (like SaladUI).

Official inclusion of DaisyUI has me really excited as I think it's a huge step in the right direction: the docs are great and it has an LLMs file for teaching your editor.

Instead of waiting for Phoenix 1.8 to drop, I've written this guide to get you up and running today.

Installing the Javascript

From the /assets/vendor directory we need to install the new assets.

cd ./assets/vendor
# this downloads the main DaisyUI script.
curl -sLo daisyui.js https://cdn.jsdelivr.net/npm/daisyui@5/index.js/+esm

mkdir daisyui
# this downloads support for Themes.
curl -sLo daisyui/theme.js https://cdn.jsdelivr.net/npm/daisyui@5/theme/index.js/+esm

Configuration Updates

We now need to update two files: app.css and config.exs

In app.css we need to configure Tailwind and DaisyUI:

@import "tailwindcss";
@source "../css";
@source "../js";

@plugin "../vendor/heroicons";

@plugin "../vendor/daisyui" {
  themes: [ "your_new_app_theme --default"]
}
@plugin "../vendor/daisyui/theme" {
  ... THEME GOES IN HERE! ...
}

Note that you might need to move around the heroicons file so that it's in the vendor path.

Also note that I've left a placeholder for a custom theme. You can build a custom theme using DaisyUI's theme builder.

# Configure tailwind (the version is required)
config :tailwind,
  version: "4.0.9",
  your_new_app: [
    args: ~w(
      --input=assets/css/app.css
      --output=priv/static/assets/app.css
    ),
    cd: Path.expand("..", __DIR__)
  ]

Again, make sure you replace my_new_app with the name of the actual app or just update the appropriate lines in your existing config.

Getting the new Core Components

Once this is done you can take a look at adopting the new core_components.ex that has been updated in the lated version of Phoenix.

git clone https://github.com/phoenixframework/phoenix
cd phoenix/installer
mix phx.new your_new_app --dev

Clone the repo, cd into the installer directory and run mix phx.new t0 make a new app – if you use the same name as your existing app, the file should just work.

I would use this as a reference instead of a wholesale replacement, because there are breaking changes.

Updating your Existing Code

You will now have compile warnings that you'll need to fix (unless this is a brand new app).

Things to note:

There's no more simple_form component. Just use form
In your forms, remove the actions wrapper around your buttons.
If you want a link as a button use <.link class="btn"... instead of the previous button classes.

You can see what the Phoenix team did in their update here. It's a good guide to fixes you need to make.