WordPress Tailwind Theme Dev

Tailwind CSS v4 + Docker + WordPress + SQLite による爆速テーマ開発環境

特徴

• SQLite - MySQLコンテナ不要で軽量・高速起動
• Tailwind CSS v4 - 最新版、設定ファイル不要
• ホットリロード - BrowserSyncによる自動ブラウザリロード
• 永続化 - テーマ、DB、wp-config.phpをホストにマウント

必要なツール

ツール	バージョン	確認コマンド
Node.js	v18+	node -v
npm	v9+	npm -v
Docker	v24+	docker -v
Docker Compose	v2+	docker-compose -v

プロジェクト構造

.
├── docker-compose.yml      # Docker設定
├── Dockerfile              # WordPress + SQLite イメージ
├── package.json            # npm scripts & 依存関係
├── src/
│   └── input.css           # Tailwind ソースCSS
├── wp/
│   ├── config/
│   │   └── wp-config.php   # WordPress設定 (永続化)
│   └── themes/
│       └── starter-theme/  # スターターテーマ (永続化)
└── db/                     # SQLiteデータベース (永続化)

初期セットアップ

1. 依存関係のインストール

npm install

2. Dockerイメージのビルドと起動

npm run docker:build
npm run docker:up

3. WordPressの初期設定

1. http://localhost:8080 にアクセス
2. 言語を選択（日本語）
3. サイト情報を入力
   • サイトのタイトル
   • ユーザー名
   • パスワード
   • メールアドレス
4. 「WordPressをインストール」をクリック

4. テーマの有効化

1. 管理画面にログイン
2. 外観 → テーマ
3. 「Starter Theme」を有効化

5. 開発サーバー起動

npm run dev

http://localhost:3000 を開く（ホットリロード有効）

コマンド一覧

コマンド	説明
npm install	依存関係をインストール
npm run docker:build	Dockerイメージをビルド
npm run docker:up	コンテナを起動
npm run docker:down	コンテナを停止
npm run docker:logs	コンテナログを表示
npm run docker:clean	コンテナ・ボリューム・イメージ・DBを完全削除
npm run dev	Tailwind watch + BrowserSync
npm run build	本番用CSS生成（minify）
npm run zip	テーマをzip化（dist/に出力）
npm start	Docker起動 + 開発サーバー一括起動

開発フロー

# 毎回の開発開始時
npm start

# または個別に
npm run docker:up
npm run dev

アクセスURL

URL	説明
http://localhost:3000	開発用（ホットリロード有効）
http://localhost:8080	直接アクセス
http://localhost:8080/wp-admin	管理画面

テーマ開発

ファイル編集

wp/themes/starter-theme/ 内のファイルを編集すると自動でブラウザがリロードされます。

Tailwind CSSの使用

PHPファイル内でTailwindクラスを使用：

<div class="max-w-4xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-gray-900">Hello World</h1>
</div>

カスタムスタイルの追加

src/input.css にカスタムスタイルを追加：

@layer components {
    .btn-custom {
        @apply px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700;
    }
}

テーマのzip化

# 対話形式でテーマを選択してzip化
npm run zip

# テーマを直接指定
npm run zip -- starter-theme

複数のテーマがある場合、矢印キーで選択できる対話型メニューが表示されます。

出力先: dist/{theme-name}-{version}.zip

トラブルシューティング

コンテナが起動しない

# ログを確認
npm run docker:logs

# クリーンビルド
docker-compose down -v
npm run docker:build
npm run docker:up

ホットリロードが効かない

• http://localhost:3000 を使用しているか確認
• BrowserSyncが起動しているか確認

SQLiteエラー

# コンテナ内でdb.phpを確認
docker exec wp-tailwind-dev ls -la /var/www/html/wp-content/db.php

# データベースディレクトリを確認
docker exec wp-tailwind-dev ls -la /var/www/html/wp-content/database/

完全リセット

npm run docker:clean
npm run docker:build
npm run docker:up

ライセンス

MIT