Phoenix 1.6製ポータルサイトへのTailwind CSS導入にあたってphx_gen_tailwindが便利だった話

この記事は、「elixir Advent Calendar 2021」22日目の記事です。
きのうは @MzRyuKa さんの記事でした！

本記事の結論

2021年12月22日時点、Elixir製Webフレームワーク Phoenix の最新バージョン1.6系に Tailwind CSS を導入する際、Hexライブラリの phx_gen_tailwind(PhxGenTailwind) が便利でオススメです。

• phx_gen_tailwind を用いた実際の Tailwind CSS 導入手順については本記事でも後述します

対象読者

• Phoenix 1.6開発において、Tailwind CSSによるStyle実装を行いたい人
• かつ、手っ取り早くTailwind CSSの環境構築をしたい人

実行環境

	バージョン	備考
elixir	1.12.2	compiled with Erlang/OTP 24
phoenix	1.6.0
npm	16.9.1

• 本記事では、elixir / phoenix / npm はあらかじめセットアップ済みであること想定です
• npmの導入については、本記事のスコープ外ですので、導入手順が必要な場合はこちらの記事等の別記事をご参照ください
  • How do we casually create an Elixir community website with Phoenix? (Chapter 2: Adapt CSS layout by Tailwind CSS)

phx_gen_tailwindの概要と導入手順

phx_gen_tailwindは、Phoenix1.6にTailwind CSSの環境構築を手早く行うためのHexライブラリです。

• GitHub

PhxGenTailwind
Adds Tailwind to your new Phoenix 1.6+ project

phx_gen_tailwindを、通常のmixインストールで準備する

• mix.exs に以下追記し、mix deps.get, mix deps.compile でインストールします

mix.exs

  defp deps do
    [
      ...
      {:phx_gen_tailwind, "~> 0.1.3"}  # <--add
    ]
  end

• 途中で聞かれる NPM install new dependencies? [Yn] に対しては y で続けます

mix phx.gen.tailwindコマンドを実行する

• インストールが済んだら、コマンド mix phx.gen.tailwind の実行が可能となっており、こちらを実行します
• これだけでTailwind CSSが使えるようになります
• 内部的な処理としては、従来の手作業によるセットアップフロー（assets/内で Tailwind CSSと依存パッケージをインストールしたりimportしたり等）を、上記コマンド一撃で実行してくれています

参考: 手作業による導入フロー

成果例

実際にphx_gen_tailwindの恩恵を受けてTailwind CSSで実装・リリースした、Phoenix 1.6製のkokura.exポータルサイトです。

イメージ

まとめ

ElixirConf US 2021で登壇発表した内容から、Tailwind CSSセットアップの部分をピックアップし、今回紹介しました。

明日の 「elixir Advent Calendar 2021」23日目は、@mnishiguchi さんの記事です。お楽しみに！