🎨 Tailwind CSSチートシート
| カテゴリ | クラス | 効果 |
|---|---|---|
| Flex | flex, items-center, justify-between | Flexboxレイアウト |
| Grid | grid, grid-cols-3, gap-4 | Gridレイアウト |
| Container | container, mx-auto, max-w-7xl | コンテナ幅制限 |
| Padding | p-4, px-6, py-2, pt-8 | 内側余白（4=1rem） |
| Margin | m-4, mx-auto, mt-8, -mb-2 | 外側余白 |
| Gap | gap-4, gap-x-2, gap-y-6 | Flex/Grid間隔 |
| Width | w-full, w-1/2, w-64, w-screen | 幅指定 |
| Height | h-full, h-screen, h-64, min-h-0 | 高さ指定 |
| Max Width | max-w-sm, max-w-lg, max-w-none | 最大幅 |
| Background | bg-blue-500, bg-white, bg-opacity-50 | 背景色 |
| Text Color | text-gray-700, text-white, text-primary | 文字色 |
| Border Color | border-gray-200, border-red-500 | 枠線色 |
| Font Size | text-sm, text-base, text-lg, text-2xl | 文字サイズ |
| Font Weight | font-normal, font-bold, font-extrabold | 文字の太さ |
| Border Radius | rounded, rounded-lg, rounded-full | 角丸 |
| Border | border, border-2, border-t, border-dashed | 枠線 |
| Shadow | shadow-sm, shadow-md, shadow-lg | 影 |
| Opacity | opacity-50, opacity-75, opacity-0 | 透明度 |
| Responsive | sm:flex, md:grid-cols-2, lg:text-xl | ブレークポイント |
| Hover | hover:bg-blue-600, hover:scale-105 | ホバー時 |
| Focus | focus:ring-2, focus:outline-none | フォーカス時 |
| Dark Mode | dark:bg-gray-900, dark:text-white | ダークモード |
| Transition | transition, duration-300, ease-in-out | アニメーション |
| Animation | animate-spin, animate-bounce, animate-pulse | 組み込みアニメ |
| Display | hidden, block, inline-flex, sr-only | 表示制御 |
📖 関連する用語
❓ よくある質問
Tailwindチートシートはどんな人向け？
Tailwind CSS初心者〜中級者向け。よく使うクラスを網羅しています。
Tailwindのクラス名は覚える必要がある？
よく使うものは自然に覚えます。VS Code拡張で補完も効きます。
印刷して使える？
はい。印刷に最適化されたレイアウトで出力されます。