最近、Elixir/Phoenix 関連の記事更新や新規登録を、連続して行っています。それはここ３，4年ほどElixir/Phoenixから離れていて、最近の進歩に置いて行かれていたので、何とか追いつこうと
していたからです。LiveView を中心に認証周りや Ecto 関連などです。今回は Tailwind CSS と daisyUI についての記事です。
次のターゲットは、機械学習 になるのかな？ PyTorch の本も、半分だけ読んで放置状態だしね。まあ、これを機会にElixirを使って、確率統計 や 機械学習 の勉強を再開するのもありかな、とかも考えています。LiveView をもう少し。

【過去記事】

1. やりたいこと

以前「Phoenix LiveViewの基本設定」　という記事で作成した画面を Tailwind と daisyUI でお化粧したいと思います。

1-1. 修正前の画像

1-2. 修正後の画像

化粧覚えたての女子高生の化粧だと思ってください。

1-3. 修正前のソースコード

一応、修正前のソースコードを掲載しておきます。

lib/liveview_people_web/templates/user/users.html.heex

<.form let={f} for={@changeset}  id="form" phx-submit="new_user">
  <%= if @changeset.action do %>
    <div class="alert alert-danger">
      <p>Oops, something went wrong! Please check the errors below.</p>
    </div>
  <% end %>

  <%= label f, :first_name %>
  <%= text_input f, :first_name, id: "first_name", placeholder: "first_name"  %>
  <%= error_tag f, :first_name %>

  <%= label f, :last_name %>
  <%= text_input f, :last_name, id: "last_name", placeholder: "last_name"  %>
  <%= error_tag f, :last_name %>

  <%= label f, :age %>
  <%= number_input f, :age, id: "age", placeholder: "age"  %>
  <%= error_tag f, :age %>

  <div>
    <%= submit "Save" %>
  </div>
</.form>

<h1>Listing Users</h1>
<table>
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
<%= for user <- @users do %>
    <tr>
      <td><%= user.first_name %></td>
      <td><%= user.last_name %></td>
      <td><%= user.age %></td>
    </tr>
<% end %>
  </tbody>
</table>

2. Tailwind CSS のインストール

以下のガイドに従って Tailwind CSS のインストールを行います。少し長くなりますが、キチンと定式化されているので、そのままなぞります。
Install Tailwind CSS with Phoenix

2-1. Tailwind pluginのインストール

mix.exs の dependencies に Tailwind plugin を追加します。

mix.exs

  defp deps do
    [
      ---
      {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
    ]
  end

次のコマンドを走らせます。

mix deps.get

2-2.Tailwind plugin の設定

config.exs に以下の Tailwind plugin の設定を追加します。

config/config.exs

config :tailwind, version: "3.2.0", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]

2-3.deployment script の更新

mix.exs に以下の行を追加します。

mix.exs

defp aliases do
  [
    "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
  ]

2-4. development の watcher リストに追加する

dev.exs の watcher リストに以下の行を追加する。

config/dev.exs

watchers: [
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]

2-5. Tailwind CSS の追加

以下のコマンドで Tailwind CSS をインストールする。

mix tailwind.install

2-6. template paths の設定の確認

template paths が以下の通りになっていることを確認する。

assets/tailwind.config.js

---
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
---

2-7. app.css の @tailwind directives の確認

app.css に以下の @tailwind directives が追加されていることを確認する

assets/css/app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

2-8. default CSS import の削除の確認

app.js で以下の app.css 行が削除されていることを確認する。

assets/js/app.js

import "../css/app.css"

3. daisyUI のインストール

以下のドキュメントに従って、daisyUI のインストールを行います。
Install daisyUI as a Tailwind CSS plugin

npm install --save --prefix assets daisyui

tailwind.config.js に require("daisyui") を追加する。

assets/tailwind.config.js

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

4. 修正後のソースコード

root.html.heex の body タグから h1 タグを取り除き、以下のようにします。

lib/liveview_people_web/templates/layout/root.html.heex

<body>
  <%= @inner_content %>
</body>

template の users.html.heex に、 Tailwind と daisyUI の class を追加して、お化粧します。