# ThemeTailwind — Editorial (Tailwind CSS)

NextCode CMS の標準フロントテーマ（2本目）。Tailwind CSS ベースの
**エディトリアル・ミニマル**デザイン（雑誌的な余白とタイポグラフィ主体）。

## デザイン
- 色（3色に抑制）: 生成り `#FAF8F5` / 墨 `#1A1A1A` / 弁柄アクセント `#9C3A1E`（＋罫線 `#E3DDD3`）
- フォント: 見出し = Shippori Mincho B1 / 本文 = Zen Kaku Gothic New（Google Fonts の link 読み込み）
- モバイルは専用設計（フルスクリーンメニュー・タップ領域44px以上）。WCAG AA コントラスト準拠

## 構成（ThemeModern と同じ構造契約）
```
Config/bootstrap.php      … Configure::write('Themes.ThemeTailwind', …) でテーマ登録
Lib/TwLayout.php          … ページ別レイアウト（1/2/3カラム・デバイス別表示）の正規化ヘルパー
View/Layouts/default.ctp  … 共通レイアウト（5領域: header/left/main/right/footer）
View/Display/show.ctp     … 通常ページ
View/Display/blog.ctp     … ブログ一覧（BlockBlogList があればブロック側に委譲）
View/Display/entry.ctp    … 記事詳細（投稿ナビAJAX・コメント・シェア）
View/Display/404.ctp      … Not Found
View/Elements/entry.ctp   … 記事1件（一覧=サムネ＋抜粋 / 詳細=全文）
webroot/css/theme.css     … Tailwind をビルドした静的1ファイル（CDN不使用・自己完結）
webroot/images/default-thumb.png … 画像なし記事のデフォルトサムネ
webroot/_meta/screen.png  … テーマ選択画面のサムネイル
```

## CSS の再ビルド手順
theme.css は Tailwind CSS **3.4.17** でコンパイルした成果物。`.ctp` 内のユーティリティクラスを
変更した場合は以下で再ビルドする（Node 18+ / npx が必要）。

1. 任意の作業ディレクトリに `tailwind.config.js` を作成:

```js
module.exports = {
  content: [
    '<リポジトリ>/app/Plugin/ThemeTailwind/View/**/*.ctp',
    '<リポジトリ>/app/Plugin/ThemeTailwind/Lib/*.php',
  ],
  theme: {
    extend: {
      colors: {
        cream: '#FAF8F5', ink: '#1A1A1A', accent: '#9C3A1E',
        line: '#E3DDD3', mute: '#6B655D',
      },
      fontFamily: {
        serif: ['"Shippori Mincho B1"', '"Hiragino Mincho ProN"', '"Yu Mincho"', 'serif'],
        sans: ['"Zen Kaku Gothic New"', '"Hiragino Kaku Gothic ProN"', '"Noto Sans JP"', 'sans-serif'],
      },
    },
  },
};
```

2. `input.css` を用意する。内容は現在の `webroot/css/theme.css` の元ソースで、
   `@tailwind base; @tailwind components; @tailwind utilities;` ＋ `@layer` のカスタムCSS
   （ブログ一覧 `tm-*`・サイドバー `tm-sb-*`・ページャー `bk-paginator`・編集モードUI `bk-*`・
   旧Bootstrap互換シム等）。カスタム部分を変更する場合はここを編集する。

3. コンパイル（静的1ファイル出力。管理画面のテーマエディタで手直しできるよう非ミニファイ）:

```bash
npx -y tailwindcss@3.4.17 -c tailwind.config.js -i input.css -o theme.css
cp theme.css <リポジトリ>/app/Plugin/ThemeTailwind/webroot/css/theme.css
```

### 注意
- `TwLayout.php` がPHPで動的生成するクラス（`lg:col-span-2〜12` / `order-1〜3` /
  `lg:order-1〜3` / `block|hidden` / `md:…` / `lg:…`）は、`View/Layouts/default.ctp` 冒頭の
  「tailwind-safelist」コメントに列挙してあり、ビルド時に必ず含まれる。
  クラスを追加した場合はこのコメントにも追記すること。
- CDN版 Tailwind（cdn.tailwindcss.com）は使用禁止（配布CMSのため自己完結必須）。
- ビルド用の一時ファイル（tailwind.config.js / input.css）はリポジトリに含めない。
