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

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

https://tailwindcss.com/

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

https://daisyui.com/

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

## Phoenixアプリを作成する

```
$ mix phx.new sample
```

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

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

https://tailwindcss.com/docs/guides/phoenix

### 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ライブラリをインストール。

```zsh
$ 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で起動

```zsh
$ mix phx.server
```

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

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

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

## daisyUIをインストール

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

```zsh
$ 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のクラスが効いてますね。無事インストールできました:ok_hand:

![スクリーンショット 2022-06-11 15.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/f412b15b-e83a-7693-be8a-e8b29f07994c.png)