Tailwind CSS 基本スタイル解説
1. 余白（マージン・パディング）
| 内容 | クラス例 | 意味 |
|---|
| パディング | p-4 | 四辺すべてに1rem |
| 上だけパディング | pt-2 | padding-top: 0.5rem |
| マージン | m-4 | margin: 1rem |
| 横方向マージン | mx-2 | 左右に0.5rem |
| 縦方向マージン | my-6 | 上下に1.5rem |
2. 文字スタイル
| 内容 | クラス例 | 意味 |
|---|
| 文字サイズ | text-lg | 大きめの文字 |
| 文字色 | text-red-500 | 赤系の文字 |
| 太字 | font-bold | 太字 |
| 文字位置 | text-center | 中央寄せ |
3. 背景とボーダー
| 内容 | クラス例 | 意味 |
|---|
| 背景色 | bg-yellow-100 | 薄い黄色の背景 |
| ボーダー | border border-red-500 | 赤枠 |
| 角丸 | rounded-lg | 角を大きく丸く |
4. レイアウト系
| 内容 | クラス例 | 意味 |
|---|
| 幅 | w-1/2 | 幅50% |
| 高さ | h-64 | 高さ16rem |
| フレックス | flex items-center | Flexboxで中央寄せ |
| グリッド | grid grid-cols-2 gap-4 | 2カラムグリッド |
| 表示切替 | hidden | 非表示にする |
5. レスポンシブ用プレフィックス
| 画面サイズ | プレフィックス | 使用例 |
|---|
| モバイル | なし | text-sm |
| 640px以上 | sm: | sm:text-base |
| 768px以上 | md: | md:text-lg |
| 1024px以上 | lg: | lg:text-xl |
| 1280px以上 | xl: | xl:text-2xl |
6. 状態系（hover, focus など）
| 状態 | クラス例 | 意味 |
|---|
| ホバー | hover:bg-blue-700 | ホバー時に背景が濃くなる |
| フォーカス | focus:ring-2 | フォーカスで輪郭表示 |
| アクティブ | active:scale-95 | クリック時に縮小 |
7. Tailwind の基本クラス例
<div class="p-4 m-2 bg-gray-100 rounded-lg text-center text-blue-600 font-bold">
これは Tailwind の基本例です
</div>
8. おすすめ練習法