Tailwind CSS 便利なクラス・オプションまとめ

# Tailwind のユーティリティクス
- 背景色: `bg-red-500`, `bg-gray-50`
- 文字色: `text-blue-500`, `text-white`
- フォントサイズ: `text-xl`, `text-4xl`
- マージン・パディング: `m-4`, `p-8`, `mt-6`
- レイアウト: `flex`, `grid`, `h-screen`
- ホバー時スタイル: `hover:bg-blue-600`
- ボーダー・シャドウ: `rounded`, `shadow-lg`

# rounded オプション
角を丸くするオプション

| クラス名 | 効果 |
|:-:|:-:|
| rounded-sm | ほんの少し丸める |
| rounded | 標準の丸み |
| rounded-md | 中程度の丸み |
| rounded-lg | 大きな丸み |
| rounded-xl | さらに大きい |
| rounded-2xl | かなり大きい |
| rounded-full | 完全な円 |

# テキストの大きさ（text-{size}）
## その前に
[この記事](https://qiita.com/ebim/items/bec14f56392fca651e93) によると、Tailwind CSSの `text-*` の `line-height` の指定値が変わったとのことなので、こちらを参照しておくといいかも、、、？
【追記：２月１３日】

## テキストのサイズ

| クラス	| サイズ(px)	| 説明 |
|:-:|:-:|:-:|
| text-xs | 12px | 超小さい |
| text-sm | 14px | 小さい |
| text-base | 16px | デフォルト |
| text-lg | 18px | 少し大きい |
| text-xl | 20px | 大きい |
| text-2xl | 24px | さらに大きい |
| text-3xl | 30px | 見出しサイズ |
| text-4xl | 36px | 大きい見出し |
| text-5xl | 48px | 特大 |
| text-6xl | 60px |	超特大 |

## 使用例
```
<p className="text-lg">少し大きいテキスト</p>
<h1 className="text-3xl font-bold">見出し</h1>
```

# テキストの太さ（font-{weight}）

| クラス | 説明 |
|:-:|:-:|
| font-thin | 極細 |
| font-extralight | 超軽量 |
| font-light | 軽め |
| font-normal | 普通 (デフォルト) |
| font-medium |	やや太め |
| font-semibold | 少し太め |
| font-bold | 太い |
| font-extrabold | 超太い |
| font-black | 最大の太さ |

## 使用例
```
<p className="font-light">軽めのテキスト</p>
<p className="font-bold">太いテキスト</p>
<p className="font-black">最大の太さ</p>
```

## 応用例
```
<h1 class="text-4xl font-bold">大きな太字の見出し</h1>
<p class="text-base font-light">これは普通の文章ですが、少し細いフォントです。</p>
<p class="text-lg font-semibold">これは少し大きめで、太めの文章です。</p>
```

# テキストの装飾
| クラス | 説明 |
|:-:|:-:|
| underline	| 下線をつける |
| line-through | 取り消し線 |
| overline | 上線 |
| no-underline | 下線なし |
| italic | 斜体 |
| not-italic | 通常のフォント |

## 使用例
```
<p class="underline">このテキストには下線があります</p>
<p class="line-through">このテキストには取り消し線があります</p>
<p class="italic">このテキストは斜体です</p>
```

# テキストの配置
| クラス	| 説明 |
|:-:|:-:|
| text-left	| 左寄せ |
| text-center | 中央寄せ |
| text-right | 右寄せ |
| text-justify | 両端揃え |

## 使用例
```
<p class="text-center">このテキストは中央に配置されています</p>
```

# 文字間・行間
## 文字列
| クラス	| 説明 |
|:-:|:-:|
| tracking-tighter | 文字間を狭くする |
| tracking-tight | 少し狭くする |
| tracking-normal | デフォルト |
| tracking-wide | 少し広くする |
| tracking-wider | さらに広くする |
| tracking-widest | 最大に広くする |

## 行間

| クラス| 説明 |
|:-:|:-:|
| leading-none | 行間なし |
| leading-tight |少し詰める |
| leading-normal | デフォルト |
| leading-loose	| 広めにする |

## 使用例
### 文字間
```
<p class="tracking-wider">このテキストは文字間が広いです</p>
```

### 行間
```
<p class="leading-loose">このテキストの行間は広めに設定されています</p>
```

# 配色関係
## 色の指定
| 色の名前 | クラス例 (text-色名-強さ) |
|:-:|:-:|
| 黒・白	| text-black / text-white|
| グレー	| text-gray-500 |
| 赤 |text-red-500 |
| 青 | text-blue-500 |
| 緑 | text-green-500 |
| 黄 | text-yellow-500 |
| 紫 | text-purple-500 |
| ピンク	| text-pink-500 |

## 濃淡の指定
| クラス	| 色の濃さ(明るい → 濃い) |
|:-:|:-:|
| text-red-100 | とても薄い赤 |
| text-red-500 | 標準の赤 |
| text-red-900 | 濃い赤 |

## 使用例
```
<p class="text-green-300">薄い緑</p>
<p class="text-green-600">普通の緑</p>
<p class="text-green-900">濃い緑</p>
```

## 応用例
### ダークモードへの対応
```
<p className="text-gray-800 dark:text-gray-200">
  通常は黒に近い色、ダークモードでは白に近い色
</p>
```

### ホバー時の対応・変更
```
<a href="#" class="text-blue-500 hover:text-blue-700">
  ホバーすると色が変わる
</a>
```

### グラデーション文字
```
<p class="bg-gradient-to-r from-pink-500 to-yellow-500 bg-clip-text text-transparent">
  グラデーションの文字
</p>
```

# シャドウ（影）
| クラス | 説明 |
|:-:|:-:|
| shadow-sm	| 小さな影 |
| shadow | 標準の影 |
| shadow-md	| 中程度の影 |
| shadow-lg	| 大きな影 |
| shadow-xl	| さらに大きな影 |
| shadow-2xl | 最大の影 |

## 使用例
```
<p class="shadow-lg">このテキストには影がついています</p>
```

# レスポンシブ対応
| クラス | 説明 |
|:-:|:-:|
| sm:text-lg | スマホで text-lg にする |
| md:text-xl | タブレットで text-xl にする |
| lg:text-2xl |PCで text-2xl にする |
| xl:text-3xl | 大画面で text-3xl にする |

```
<p class="text-base sm:text-lg md:text-xl lg:text-2xl">
  画面サイズに応じてフォントサイズが変わります
</p>
```
# その他
## コミットメッセージの書き方
### 変更内容の種類
| 種類 | 説明 |
|:-:|:-:|
|feat: | 新機能の追加 |
| fix: | バグ修正 |
| style: | コードのフォーマット変更（動作に影響なし） |
| refactor:	| リファクタリング（仕様変更なし） |
| docs:	| ドキュメント更新 |
| chore: | ビルドツールや設定の変更 |

### コミット例
```
git commit -m "feat: Tailwindの背景・文字色・レイアウト設定を追加"
git commit -m "style: テキストのフォントサイズと太さの調整"
git commit -m "fix: レスポンシブ対応でスマホ表示時のフォントサイズを修正"
```


今後も追記していく予定です。