はじめに
Material-tailwindのドキュメントに、Phoenixでの使い方が載ってました。これをみながら試してみます。
phoenixのインストール
Phoenixが使えるようにしておきます。
プロジェクトの作成
mix phx.new --database sqlite3 mt_app
起動してみます
$ cd mt_app/
$ mix ecto.create
Compiling 15 files (.ex)
Generated mt_app app
The database for MtApp.Repo has been created
$ mix phx.server
node.jsが動作する環境が必要なので、dockerのコンテナで環境を用意します。
vscodeでAdd Dev Contaner Configuration Fileコマンドで設定ファイルを作る事ができます。
/mt_app/.devcontainer/devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
"name": "Node.js",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/elixir-asdf:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}
/mt_app/.devcontainer/devcontainer.jsonを作成してこのプロジェクトをコンテナーで開くと、node.jsとElixirの環境が構築された状態になります。
material-tailwindのインストール
material-tailwindのマニュアルの記述通りでうまくいきました。
yarnコマンドは、assetsのディレクトリで実行します。
Tailwindの設定の修正
withMT()を呼び出すように、tailwind.config.jsを修正します。
/mt_app/assets/tailwind.config.js
const fs = require("fs")
const path = require("path")
-module.exports = {
+const withMT = require("@material-tailwind/html/utils/withMT")
+
+module.exports = withMT({
content: [
"./js/**/*.js",
"../lib/mt_app_web.ex",
@@ -65,4 +67,4 @@ module.exports = {
}, {values})
})
]
-}
+})
テストページ
/mt_app_web/controllers/page_html/home.html.heexここにMaterial-tailwindの部品を置いてみます。
表示できました。
まとめ
- Containerを使った開発環境の構築でNode.js/yarn/Elixir/Phoenixの環境を簡単に作ることができた。
- マニュアルに記載されてる方法で、Material-tailwindが使えるようにできた。