You are overcomplicating things. I just tested this with a fresh Phoenix 1.7.7 project:

Setup DaisyUI

• Create project:

  • mix phx.new your_project

• Initialize an npm project in the directory assets/:

  • cd assets && npm init -y

• Add npm dependency daisyui in the directory assets/:

  • cd assets && npm i -D daisyui@latest

• Add daisyUI to Tailwind plugins list (in assets/tailwind.config.js):

  • require("daisyUI")

  plugins: [
+    require('daisyui'),
    require("@tailwindcss/forms"),

• DaisyUI is now installed! Let’s try an example component:

lib/your_project_web/controllers/page_html/home.html.heex

    <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
      Phoenix Framework
      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
        v<%= Application.spec(:phoenix, :vsn) %>
      </small>
    </h1>

+    <div class="btn btn-primary">
+      Hello daisyUI!
+    </div>

    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
      Peace of mind from prototype to production.
    </p>

It worked (for me, at least )!

At this point, daisyUI is installed and everything should be working as expected.

Now for the deployment:

Deploy to Fly.io

• Create Fly.io app:

  • ‘flyctl launch’

• Fix issues with the default Dockerfile generated when we ran fly launch:

  • Use apt-get to install nodejs and npm
  • Install our project’s npm dependencies

FROM ${BUILDER_IMAGE} as builder

# install build dependencies
-RUN apt-get update -y && apt-get install -y build-essential git \
+RUN apt-get update -y && apt-get install -y build-essential git nodejs npm \
     && apt-get clean && rm -f /var/lib/apt/lists/*_*
 
# ...

COPY priv priv

COPY lib lib

COPY assets assets
 
+# install npm dependencies
+RUN cd assets && npm install
+
# compile assets
RUN mix assets.deploy

Bonus: Prevent daisyUI from spamming the console when tailwind.config.js is modified

By default, daisyUI will print a message like this to the console whenever tailwind.config.js is modified:

🌼 daisyUI 3.5.0 https://daisyui.com
╰╮
 ╰─ ✔︎ [ 2 ] themes are enabled. You can add more themes or make your own theme:
      https://daisyui.com/docs/themes

    ❤︎ Support daisyUI: https://opencollective.com/daisyui

That’s annoying. Let’s disable that:

assets/tailwind.config.js

module.exports = {
  content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
+  daisyui: {
+    logs: false,
+  },
  plugins:  [

Bonus: Remove tailwind/forms to avoid conflicts with daisyUI form components

The Tailwind forms package will cause conflicts with daisyUI forms. Let’s get rid of it:

assets/tailwind.config.js

  plugins: [
    require("daisyui"),
-    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),

Hey @kingdomcoder, I’m sorry you’ve had a frustrating experience. While I have not used DaisyUI myself, I imagine others who want to help would find it easier if you described what made this hard for you, or what problems you ran into that require help.

I just realized that tailwindcss-cli is working with 3rd party plugins also in the latest version. That would mean that the best way to integrate daisyui into phoenix application is:

1. create a new phoenix application.
2. Use phoenixframework/tailwind: An installer for tailwind (github.com) to integrate tailwindcss into the project
3. cd assets
4. yarn add daisyui
5. In your tailwind.config.js file add the line plugins: [require("daisyui")],

That is it. There is no 6th step.