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
daisyuiin the directoryassets/: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-getto installnodejsandnpm - Install our project’s
npmdependencies
- Use
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"),
