Rocky Linuxで始めるTailwind CSS入門：Bootstrapとの違いから導入・運用まで

Tailwindは非常に柔軟なCSSフレームワークですが、Bootstrapとは設計思想が大きく異なるため、従来のPHP中心の開発に慣れている場合は戸惑うポイントも少なくありません。

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

• 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