# 画面遷移図

## 概要

本プロジェクト（Tailwind CSS）はCSSユーティリティフレームワークであり、一般的なWebアプリケーションとは異なります。画面を持つのは `playgrounds/` ディレクトリ配下の3つのデモアプリケーションのみです。

各Playgroundは独立したアプリケーションであり、相互間の画面遷移はありません。また、各Playgroundはそれぞれ単一ページ構成（トップページのみ）のため、Playground内の画面遷移も存在しません。

## Vite Playground

```mermaid
graph TD
    subgraph VitePlayground["Vite Playground"]
        V_INDEX["index.html<br/>エントリポイント"]
        V_MAIN["main.tsx<br/>Reactマウント"]
        V_APP["app.tsx<br/>Appコンポーネント<br/>トップページ"]

        V_INDEX -->|"script type=module"| V_MAIN
        V_MAIN -->|"ReactDOM.createRoot"| V_APP
    end
```

## Next.js Playground

```mermaid
graph TD
    subgraph NextjsPlayground["Next.js Playground"]
        N_LAYOUT["layout.tsx<br/>ルートレイアウト"]
        N_PAGE["page.tsx<br/>トップページ（/）"]

        N_LAYOUT -->|"children"| N_PAGE
    end
```

## V3 Playground

```mermaid
graph TD
    subgraph V3Playground["V3 Playground（Tailwind CSS v3互換）"]
        V3_LAYOUT["layout.tsx<br/>ルートレイアウト"]
        V3_PAGE["page.tsx<br/>トップページ（/）"]

        V3_LAYOUT -->|"children"| V3_PAGE
    end
```

## 全体構成図

```mermaid
graph LR
    subgraph TailwindCSS["Tailwind CSS プロジェクト"]
        subgraph Playgrounds["playgrounds/"]
            subgraph Vite["vite/"]
                V_TOP["トップページ<br/>Hello World"]
            end
            subgraph Nextjs["nextjs/"]
                N_TOP["トップページ<br/>Hello world!"]
            end
            subgraph V3["v3/"]
                V3_TOP["トップページ<br/>Hello world!"]
            end
        end
    end

    style Vite fill:#e0f2fe,stroke:#0284c7
    style Nextjs fill:#fce7f3,stroke:#db2777
    style V3 fill:#f0fdf4,stroke:#16a34a
```

## 補足

- 各Playgroundは独立したアプリケーションであり、相互間のリンクや遷移は存在しない
- すべてのPlaygroundは単一ページ構成のため、ページ間遷移は発生しない
- Vite PlaygroundはReact + Vite構成で、SPA（Single Page Application）として動作する
- Next.js PlaygroundおよびV3 PlaygroundはNext.js App Router構成で、サーバーサイドレンダリングに対応する
