特に以下のような疑問がよく出てきます。

• Composerで導入できないのはなぜか
• 設定ファイルはどこに置くべきか
• 監視コマンドはなぜ止まらないのか

こうした疑問を、PHPフレームワーク CodeIgniter4のディレクトリ構成をベースに整理しながら、実際に動く形で説明していきます。

前提環境

本記事は以下の構成を前提としています。

設定ファイルの作成と配置場所

CodeIgniter4環境では、Tailwind関連ファイルの配置は以下になります。

/プロジェクトルート
├── app/
│   └── Views/
├── public/
│   └── css/
├── writable/
├── vendor/
├── package.json
├── tailwind.config.js
├── input.css

ここで重要なのは以下です。

特に tailwind.config.js は
package.jsonと同じ階層に置く必要があります。

content設定（CI4特有ポイント）

export default {
  content: [
    "./app/Views/**/*.php",
  ],
}

これはCodeIgniter4特有です。

• Viewファイルが app/Views にあるためTailwindがクラスを検出するために必須

CSS読み込み（CI4）

<link href="/css/app.css" rel="stylesheet">

CI4では public/ がドキュメントルートのため
/css/app.css で参照できます

監視コマンドの意味（CI4でも共通）

npx tailwindcss -i input.css -o public/css/app.css --watch

このコマンドは

• View（app/Views）を監視
• クラス変更を検知
• CSSを再生成

という動作になります。

ターミナルが使えなくなる理由

これはCI4固有ではなく、Tailwindの仕様です。

ターミナルを閉じても動かす方法

サーバ上でCI4を動かす場合は以下が現実的です。

nohup npx tailwindcss -i input.css -o public/css/app.css --watch > tailwind.log 2>&1 &

または

tmux

→ セッションを分離して運用

本番環境での注意（CI4）

本番ではwatchは使いません。

npx tailwindcss -i input.css -o public/css/app.css --minify

CI4は静的ファイルをそのまま配信するため事前ビルドのみでOK

まとめ

今回の内容は「単なるTailwind導入」ではなく、CodeIgniter4環境での正しい配置と運用 がポイントです。

特に重要なのは以下です。

• Composerではなくnpmを使う
• 設定ファイルはプロジェクトルート
• Viewパスをcontentに指定
• watchは開発専用

Tailwindは最初こそBootstrapより手間に感じますが、
一度慣れると「レイアウトの自由度」が段違いです。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com