Phoenix Framework (elixir) and Daisy UI

Here are the steps to install daisy UI with Phoenix Framework 1.7.7

I started a new Phoenix project:

Install Phoenix:

sudo port install elixir
mix archive.install hex phx_new

Create new phoenix project:

mix phx.new hello

Setup everything:

For Postgres I use Docker.

cd hello
mix ecto.create

Install Daisy UI:

I’m using version: 3.5.1 and node 18

cd assets/

npm i -D daisyui@latest

Open: tailwind.config.js Add the daisyUI plugin. (It must be the first plugin)

// ...
daisyui: {
    themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: false, // <-- to remove logs from the console.
},
plugins: [
    require("daisyui"),
    require("@tailwindcss/forms"),

    // ...
],

Update mix.exs:

  defp aliases do
    [
      setup: ["deps.get", "ecto.setup", "assets.setup", "assets.build"],
      "npm.install": ["cmd cd assets && npm install"], # <- Added this command
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
      "assets.setup": ["npm.install", "tailwind.install --if-missing", "esbuild.install --if-missing"],  # <- register install alias
      "assets.build": ["tailwind default", "esbuild default"],
      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
    ]
  end

Start the server:

mix phx.server

Using Production Flag

mix deps.get --only prod
MIX_ENV=prod mix compile
MIX_ENV=prod mix assets.setup
MIX_ENV=prod mix assets.deploy

PORT=4001 \
MIX_ENV=prod \
DATABASE_URL=ecto://postgres:postgres@localhost/hello_dev \
SECRET_KEY_BASE=MUST_BE_AT_LEAST_64_BIT_OTHERWISE_IT_CRASHES_WHEN_TRYING_TO_ACCESS_IT \
PHX_HOST=0.0.0.0 \
mix phx.server

Voila !

Note: I only have 15 minutes of experience with Phoenix Framework and few hours with Elixir.