PhoenixでTailwind CSSをインストール

PhoenixプロジェクトでのTailwind CSSの設定。

プロジェクトを作成する

まだ設定していない場合は、新しいPhoenixプロジェクトを作成することから始めます。彼らの手順に従うことができますインストールガイドを参照して、起動して実行してください。

ターミナル

mix phx.new myproject
cd myproject

Tailwindプラグインをインストールする

Tailwindプラグインを依存関係に追加し、mix deps.get を実行してインストールします。

mix.exs

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

Tailwindプラグインを設定する

config/config.exs ファイルで、使用するTailwind CSSのバージョンを設定し、アセットパスをカスタマイズできます。

config.exs

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

デプロイメントスクリプトを更新する

デプロイ時にCSSをビルドするように assets.deploy エイリアスを設定します。

mix.exs

defp aliases do
  [
    # …
    "assets.deploy": [
      "tailwind myproject --minify",
      "esbuild myproject --minify",
      "phx.digest"
    ]
  ]
end

開発時にウォッチャーを有効にする

./config/dev.exs ファイルのウォッチャーのリストにTailwindを追加します。

dev.exs

watchers: [
  # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
  esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]},
  tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]}
]

Tailwind CSSをインストールする

インストールコマンドを実行して、スタンドアロンのTailwind CLIをダウンロードします。

ターミナル

mix tailwind.install

Tailwind CSSをインポートする

Tailwind CSSをインポートする @import を ./assets/css/app.css に追加します。

app.css

@import "tailwindcss";

デフォルトのCSSインポートを削除する

Tailwindがこれを処理するようになったため、./assets/js/app.js からCSSインポートを削除します。

app.js

// Remove this line if you add your own CSS build pipeline (e.g postcss).
import "../css/app.css"

ビルドプロセスを開始する

mix phx.server でビルドプロセスを実行します。

ターミナル

mix phx.server

プロジェクトでTailwindの使用を開始する

Tailwindのユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

index.html.heex

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