PhoenixアプリにTailwind CSS、daisyUIを追加する #Phoenix

本記事ではPhoenixアプリにTailwind CSS、daisyUIを追加します。

daisyUIはTailwind CSSのコンポーネントライブラリです。

phx_gen_tailwindもTailwind CSSのインストールに利用できますが、
assets/package.jsonの変更が必要になり、Gigalixirのデプロイ設定と衝突してしまうので
ここではtailwindプラグインを使用してインストールします。

Phoenixアプリを作成する

$ mix phx.new sample

tailwindプラグインをインストール、設定ファイルを追加

Tailwind CSSのドキュメントを見ながらインストールを進めます。

tailwindプラグインをインストール

mix.exs

  defp deps do
    [
      {:phoenix, "~> 1.6.10"},
      {:phoenix_ecto, "~> 4.4"},
      ~略~
      {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}, # <-追加
      ~略~
      {:plug_cowboy, "~> 2.5"}
    ]
  end

mix deps.getを実行。追加したtailwindライブラリをインストール。

$ mix deps.get

~ 略~

New:
  tailwind 0.1.6
* Getting tailwind (Hex package)

tailwindプラグインの設定をconfigに追加

config/config.exs

~略~

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

~略~

デプロイスクリプトをにtailwindを追加

"tailwind default --minify"をassets.deployに追加。

mix.exs

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

watcherにtailwindを追加

config/dev.exs

config :sample, SampleWeb.Endpoint,
  ~略~
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]} # <-追加
  ]

tailwindプラグインでTailwind CSSインストール

PhoenixアプリのルートディレクトリでTailwind CSSインストールを実行

$ mix tailwind.install
==> tailwind
Compiling 3 files (.ex)
Generated tailwind app

14:30:06.110 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.1.2/tailwindcss-macos-x64

作成されたtailwind.config.jsを確認

assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

app.cssにtailwindcssのインポートが追加されていることを確認

assets/css/app.css

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

app.jsからデフォルトのcssインポートの記述が消えていることを確認

assets/js/app.js

import "../css/app.css" # <- この行が無いはず

Phoenixアプリをlocalで起動

$ mix phx.server

http://localhost:4000にブラウザーでアクセス。

tailwindユーティリティクラスを試しに追記してみましょう

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

daisyUIをインストール

assetsディレクトリーに移動して、daisyUIをインストール

$ cd assets
$ npm i daisyui

tailwind.config.jsにdaisyuiを追加

assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require("daisyui") // <-追加
  ]
}

mix phx.serverを一度終了し、再度起動する。

daisyUIユーティリティクラスを試しに追記してみましょう

<button class="btn">test</button>

追加したTailwind CSS、daisyUIのクラスが効いてますね。無事インストールできました