# プロジェクトを作成（my-appは好きな名前に変更可能）
npx sv create my-app

# 質問に答える：
# ┌  Welcome to the Svelte CLI!
# │
# ◆  Which template would you like?
# │  ● SvelteKit minimal（これを選択）
# │  ○ SvelteKit demo
# │  ○ Svelte library
# │
# ◆  Add type checking with Typescript?
# │  ● Yes, using Typescript syntax（TypeScriptを使う場合）
# │  ○ Yes, using JSDoc comments
# │  ○ No
# │
# ◆  What would you like to add to your project?
# │  ◻ prettier（コード整形）
# │  ◻ eslint（コード検査）
# │  ☑ tailwindcss（これを選択！）  ← 重要
# │  ◻ drizzle
# │  ◻ lucia
# │  ◻ mdsvex
# │
# ◆  tailwindcss: Which plugins would you like to add?
# │  ◻ typography（文章向けスタイル）
# │  ◻ forms（フォーム向けスタイル）
# │  ◻ container-queries
# │  （必要なものを選択、なくてもOK）
# │
# └  Your project is ready!

# プロジェクトフォルダに移動
cd my-app

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm run dev

# 表示される内容：
#   VITE v5.x.x  ready in xxx ms
#
#   ➜  Local:   http://localhost:5173/
#   ➜  Network: use --host to expose
#
#   ➜  press h + enter to show help

my-app/
├── src/
│   ├── routes/              ← ページを置く場所（重要！）
│   │   └── +page.svelte     ← トップページ（/）
│   ├── lib/                 ← 共通コンポーネントやユーティリティ
│   ├── app.html             ← HTMLテンプレート
│   └── app.css              ← グローバルCSS（Tailwind読み込み済み）
│
├── static/                  ← 画像などの静的ファイル
│   └── favicon.png
│
├── tailwind.config.ts       ← Tailwindの設定
├── svelte.config.js         ← SvelteKitの設定
├── vite.config.ts           ← ビルドツールの設定
├── package.json             ← 依存関係とスクリプト
└── tsconfig.json            ← TypeScript設定

/* src/app.css */
/* sv createで自動的に追加されている */
@import 'tailwindcss';

/* カスタムスタイルを追加する場合はここに書く */

<!-- src/routes/+page.svelte -->
<h1 class="text-3xl font-bold text-blue-600">
  Hello SvelteKit + Tailwind!
</h1>

<p class="mt-4 text-gray-600">
  Tailwind CSSが正常に動作しています。
</p>

<button class="mt-4 px-6 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors">
  ボタン
</button>

<!-- src/routes/about/+page.svelte -->
<svelte:head>
  <title>About | My App</title>
</svelte:head>

<div class="max-w-2xl mx-auto py-12 px-4">
  <h1 class="text-3xl font-bold mb-6">About</h1>

  <p class="text-gray-600 leading-relaxed">
    このサイトはSvelteKitとTailwind CSSで作られています。
  </p>

  <a
    href="/"
    class="inline-block mt-6 text-blue-600 hover:underline"
  >
    ← ホームに戻る
  </a>
</div>

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';
  let { children } = $props();
</script>

<div class="min-h-screen flex flex-col">
  <!-- ヘッダー -->
  <header class="bg-white border-b sticky top-0 z-50">
    <div class="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
      <a href="/" class="text-xl font-bold text-orange-500">
        My App
      </a>
      <nav class="flex gap-6">
        <a href="/" class="hover:text-orange-500 transition-colors">ホーム</a>
        <a href="/about" class="hover:text-orange-500 transition-colors">About</a>
      </nav>
    </div>
  </header>

  <!-- メインコンテンツ -->
  <main class="flex-1">
    {@render children()}
  </main>

  <!-- フッター -->
  <footer class="bg-gray-100 border-t">
    <div class="max-w-6xl mx-auto px-4 py-6 text-center text-gray-600">
      © 2024 My App. All rights reserved.
    </div>
  </footer>
</div>

<!-- src/routes/blog/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<!-- ルートレイアウト(ヘッダー・フッター)の中に表示される -->
<div class="flex max-w-6xl mx-auto">
  <!-- サイドバー -->
  <aside class="w-64 p-4 border-r">
    <h3 class="font-bold mb-4">カテゴリ</h3>
    <ul class="space-y-2">
      <li><a href="/blog?cat=tech">技術</a></li>
      <li><a href="/blog?cat=life">生活</a></li>
    </ul>
  </aside>

  <!-- 記事コンテンツ -->
  <main class="flex-1 p-6">
    {@render children()}
  </main>
</div>