やってみよう！Elixir / Phoenix 関数型プログラミングの基礎⑥

Tailwind CSSとdaisyUI

Tailwind CSSとは？

Tailwind CSS はオープンソースの CSS フレームワークです。mix phx.new コマンドに --no-tailwind を付けない限り、デフォルトで Phoenix アプリケーションに組み込まれています。

Tailwind CSS の特徴は「ユーティリティファースト（utility first）」というキャッチフレーズが表しています。Bootstrap などの他の CSS フレームワークと異なり、ボタン、カードなどのコンポーネントを作るためのクラスを提供しません。その代わり、文字色、背景色、マージン、パディングなどのスタイル属性を設定するためのクラスを数多く提供しています。

Tailwind.cssとは？

Bootstrap などと同様に、Tailwind CSS はレスポンシブデザインに対応しています。すなわち、単一の Web ページで多様な画面サイズをサポートできます。

app レイアウトのソースコードを次のように書き換えてください。

<main class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-2xl sm:border-4 sm:border-black sm:p-4">
    {@inner_content}
  </div>
</main>

daisyUIとは？

daisyUI は Tailwind CSS 用のプラグインです。これを用いれば、Bootstrap のようにボタンやカードのようなコンポーネントを描くことができます。

daisyUI コンポーネントの一覧を知りたければ https://daisyui.com/components/ を訪問してください。

導入方法

cd assets
npm i daisyui@4.12.14
cd ..

assets ディレクトリにある tailwind.config.js を次のように書き換えてください。

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

<a>要素の形状をボタン化する

daisyUI のコンポーネントを使ってみましょう。index アクションのための HEEx テンプレートを次のように書き換えてください。

<ol class="flex justify-center">
  <%= for name <- ~w(Alice Bob Carol) do %>
    <li>
      <a href={~p(/hello?name=#{name})} class="underline text-blue-700">
        <a href={~p(/hello/#{name})} class="btn btn-primary mx-2">
         {name}
       </a>
      </a>
    </li>
  <% end %>
</ol>