2023-01-18

マルチサイトを想定したCraft CMS（DDEV環境）で複数の tailwind.config.js を設置する

Craft CMS のローカル環境を ddev で作った。

DDEV を使って Craft CMS のローカル開発環境を構築する | Craft CMS | かたつむりくんのWWW
https://tinybeans.net/blog/202...

そのローカル環境でマルチサイトを運用していると想定した時のテンプレート構成はこんな感じになる。

20230118 071651

templates 配下に各マルチサイト用のテンプレートが入ってくる。
ドキュメントルートをどうするかとかはあるのだけど、一旦この状態で、

  • note.example.ddev
  • mmm.example.ddev
  • www.example.ddev

でアクセスできる。

各サイト用の Tailwind の設定

それぞれのサイトで、Tailwind を使ってCSS書くときに config はどうするんだろうなぁと思ったのだが、 Using multiple configurations ということで設定方法が書いてあった。

Configuration - Tailwind CSS
https://tailwindcss.com/docs/c...

これを参考にして、

  • tailwind.note.config.js
  • tailwind.www.config.js

を用意する。

cssはどこにおくかはそれぞれだと思うが、cssに

@config "../../../tailwind.www.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

とりあえずこんな感じにして、あとは実行しておけば問題無かった。

なんて簡単。

Functions & Directives - Tailwind CSS
https://tailwindcss.com/docs/f...

ドキュメントはちゃんと読みましょう。