PhoenixアプリにTailwindcssを導入してFly.ioにデプロイする方法

注）以下、tailwindパッケージのバージョンが0.1.4以下が前提です。

去年12月にChrisMccord氏のブログで発表されたようにTailwindcssがNode-freeでPhoenixアプリに導入できるようになりました。

それを受け、Tailwindcss + PhoenixでFly.ioにデプロイしてみました。

Tailwindcssが動かず、コミュニティーでトピックを作成したところ、Chris Mccord氏から返答をいただけたので解決方法を共有します。

基本的な設定はChrisMccord氏のブログでできます。念の為Tailwindcssのバージョンを最新版にしておいてください。

結論

Dockerfileで

Dockerfile

COPY lib lib

を

Dockerfile

RUN mix assets.deploy

よりも上に記述してください。

app.jsでapp.cssのインポートをコメントアウトしてください。

assets/js/app.js

// (追記) tailwindが ~> 0.1.5 の場合はすでにコメントアウトされた状態だと思います
// import "../css/app.css"

Chris Mccord氏に回答いただいたのでこのやり方でうまくいくはずです。

参考

トピックで既存のプロジェクトからNPMを消してTailwindcssを動かす方法についてご説明されている記事を共有いただきました。既存プロジェクトを今後デプロイする予定の方はご参考にされると良いかもしれません。