Tailwind CSS コースは基礎から実践まで10クエストで構成されています。すべてブラウザ上でのコーディング演習です。
📋 クエスト一覧
| # | テーマ | 学ぶ主なクラス | レベル |
|---|---|---|---|
| 1 | Tailwindとは・CDN導入 | text-3xl, font-bold, text-blue-600 | 基礎 |
| 2 | ユーティリティクラス（色・サイズ） | bg-blue-500, w-32, h-16 | 基礎 |
| 3 | spacing（margin・padding） | p-6, m-4, px-4, py-2, mb-2 | 基礎 |
| 4 | Flexbox | flex, justify-center, items-center, gap-4 | 基礎 |
| 5 | レスポンシブデザイン | sm:, md:, lg:, flex-col md:flex-row | 応用 |
| 6 | テキスト関連 | text-xl, font-bold, text-gray-600, italic | 基礎 |
| 7 | ボーダー・角丸 | border-2, rounded-xl, shadow-md | 基礎 |
| 8 | ホバー・状態クラス | hover:bg-blue-700, transition, duration-200 | 応用 |
| 9 | グリッドレイアウト | grid, grid-cols-3, col-span-2, gap-4 | 応用 |
| 10 | 総合問題（商品カード） | 全クラスの組み合わせ | 発展 |