Just a heads up that the :tailwind library comes with a precompiled binary of Tailwind that does not include third-party libraries like DaisyUI. I’m not sure whether or when this changed, but to use DaisyUI, you now have to install Tailwind using npm instead. This is what worked for me:
- Remove the
:tailwind library and its configuration from config.exs and dev.exs (the line in watchers:)
- Install tailwindcss and DaisyUI using
npm with cd assets && npm install -D tailwindcss daisyui.
- Add a
deploy script in your package.json. My package.json looks like this:
{
"scripts": {
"deploy": "NODE_ENV=production npx tailwindcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
},
"devDependencies": {
"tailwindcss": "^3.3.3",
"@tailwindcss/forms": "^0.5.4",
"@tailwindcss/typography": "^0.5.9",
"daisyui": "^3.2.1"
}
- In your
mix.exs update the aliases like this:
[
setup: ["deps.get", "ecto.setup", "assets.setup", "assets.build"],
"assets.setup": ["esbuild.install --if-missing"],
"assets.build": ["esbuild default", "cmd --cd assets npm run deploy"],
"assets.deploy": ["esbuild default --minify", "cmd --cd assets npm run deploy", "phx.digest"]
]
Make sure that the cmd --cd assets npm run deploy comes after the esbuild default step, because (that’s my understanding but I’ve got no clue about any of this frankly) esbuild will install your npm packages (at least locally). So, you need to run esbuild default to install the npm packages first.
Now, if you run your server with mix phx.server, it should work. At least it works for me locally and after deleting my _build and node_modules folder.
Deploying to Fly.io
Now, the next hurdle is to deploy all this do Fly (if you use them). You have to modify your Dockerfile a bit to make it work (again, I have no clue about how any of this works, but this worked for me. Suggestions and explanations are much appreciated though)
ARG ELIXIR_VERSION=1.14.4
ARG OTP_VERSION=25.3.2
ARG DEBIAN_VERSION=bullseye-20230227-slim
ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
FROM ${BUILDER_IMAGE} as builder
# ADD curl HERE AFTER install -y
RUN apt-get update -y && apt-get install -y curl build-essential git \
&& apt-get clean && rm -f /var/lib/apt/lists/*_*
# Install something so that you can apt-get install nodejs below
# Make sure to select the version of node you want to install.
# This one will install node v20.something
RUN curl -sL https://deb.nodesource.com/setup_20.x | bash
# Install node and npm
RUN apt-get install -y nodejs
# A BUNCH OF OTHER STUFF
COPY assets assets
# Install TailwindCSS and DaisyUI
# I've got no clue why esbuild doesn't do this for us but here we are
RUN npm install --prefix assets
# compile assets
RUN mix assets.deploy
# MORE OTHER STUFF
I hope this helps! If you know how to install the packages without npm/node and only using esbuild I’d love to know!
