Tailwind CSS まとめ

:::note
参考: [公式ドキュメント(Tailwind CSS)](https://tailwindcss.com/)
:::


### <font color="#1e90ff">レイアウト</font>
- `container`: コンテナの幅を設定
- `box-border`: ボックスモデルのボーダーを含む
- `box-content`: ボックスモデルのコンテンツのみ
- `flex`: フレックスボックスの設定
- `grid`: グリッドレイアウトの設定
- `space-x-{n}`: フレックスアイテム間の水平スペース
- `space-y-{n}`: フレックスアイテム間の垂直スペース

**使用例**
- `container mx-auto`: コンテナを中央揃え
- `flex justify-center`: フレックスアイテムを中央揃え
- `grid grid-cols-3`: 3列のグリッドレイアウト
- `space-x-4`: フレックスアイテム間に4の水平スペース
- `space-y-4`: フレックスアイテム間に4の垂直スペース

### <font color="#1e90ff">スペース（マージン・パディング）</font>
- `m-{n}`: 全体のマージン
- `mt-{n}`: 上のマージン
- `mb-{n}`: 下のマージン
- `ml-{n}`: 左のマージン
- `mr-{n}`: 右のマージン
- `mx-{n}`: 左右のマージン
- `my-{n}`: 上下のマージン
- `p-{n}`: 全体のパディング
- `pt-{n}`: 上のパディング
- `pb-{n}`: 下のパディング
- `pl-{n}`: 左のパディング
- `pr-{n}`: 右のパディング
- `px-{n}`: 左右のパディング
- `py-{n}`: 上下のパディング

**使用例**
- `m-4`: 全体に4のマージン
- `mt-2`: 上に2のマージン
- `mb-6`: 下に6のマージン
- `px-8`: 左右に8のパディング
- `py-4`: 上下に4のパディング

### <font color="#1e90ff">サイズ（幅、高さ）</font>
- `w-{n}`: 幅
- `h-{n}`: 高さ
- `min-w-{n}`: 最小幅
- `min-h-{n}`: 最小高さ
- `max-w-{n}`: 最大幅
- `max-h-{n}`: 最大高さ
- `0`: `0px`
- `1/2`: `50%`
- `1/3`: `33.333333%`
- `2/3`: `66.666667%`
- `1/4`: `25%`
- `3/4`: `75%`
- `1/5`: `20%`
- `2/5`: `40%`
- `3/5`: `60%`
- `4/5`: `80%`
- `1/6`: `16.666667%`
- `5/6`: `83.333333%`
- `full`: `100%`
- `screen`: ビューポート全体（例えば`w-screen`や`h-screen`）
- `auto`: 自動調整（例えば`w-auto`や`h-auto`）

**使用例**
- `w-full`: 幅を100%に設定
- `h-screen`: 高さをビューポート全体に設定
- `min-w-0`: 最小幅を0に設定
- `max-w-lg`: 最大幅を大に設定
- `h-16`: 高さを16に設定

**単位**
- `{n}px`: ピクセル単位
- `{n}rem`: rem単位

**サイズのプリセット**
- `xs`: `20rem` (320px)
- `sm`: `24rem` (384px)
- `md`: `28rem` (448px)
- `lg`: `32rem` (512px)
- `xl`: `36rem` (576px)
- `2xl`: `42rem` (672px)
- `3xl`: `48rem` (768px)

**使用例**
- `max-w-xs`: 最大幅を320pxに設定
- `max-w-sm`: 最大幅を384pxに設定
- `max-w-md`: 最大幅を448pxに設定
- `max-w-lg`: 最大幅を512pxに設定
- `max-w-xl`: 最大幅を576pxに設定
- `max-w-2xl`: 最大幅を672pxに設定
- `max-w-3xl`: 最大幅を768pxに設定
- `min-w-xs`: 最小幅を320pxに設定
- `min-w-sm`: 最小幅を384pxに設定
- `min-w-md`: 最小幅を448pxに設定
- `min-w-lg`: 最小幅を512pxに設定
- `min-w-xl`: 最小幅を576pxに設定
- `min-w-2xl`: 最小幅を672pxに設定
- `min-w-3xl`: 最小幅を768pxに設定

**使えないパターン**
- `w-xs`: 幅を320pxに設定（使えない）
- `h-sm`: 高さを384pxに設定（使えない）

### <font color="#1e90ff">色</font>
- `bg-{color}`: 背景色
- `text-{color}`: 文字色
- `border-{color}`: ボーダー色
- `divide-{color}`: フレックスアイテム間の分割線の色

**使用例**
- `bg-blue-500`: 背景色を青に設定
- `text-white`: 文字色を白に設定
- `border-gray-300`: ボーダー色を灰色に設定
- `divide-red-500`: 分割線の色を赤に設定
- `bg-opacity-50`: 背景の不透明度を50%に設定

### <font color="#1e90ff">タイポグラフィ</font>
- `text-{size}`: 文字サイズ
- `font-{family}`: フォントファミリー
- `font-{weight}`: フォントウェイト
- `leading-{size}`: 行の高さ（line-height）
- `tracking-{size}`: 文字間のスペース（letter-spacing）

**使用例**
- `text-lg`: 文字サイズを大に設定
- `font-sans`: サンセリフフォントを使用
- `font-bold`: 太字に設定
- `leading-tight`: 行の高さを詰める
- `tracking-wide`: 文字間のスペースを広げる

**文字サイズのプリセット**
- `xs`: `0.75rem` (12px)
- `sm`: `0.875rem` (14px)
- `base`: `1rem` (16px)
- `lg`: `1.125rem` (18px)
- `xl`: `1.25rem` (20px)
- `2xl`: `1.5rem` (24px)
- `3xl`: `1.875rem` (30px)

**使用例**
- `text-xs`: 文字サイズを12pxに設定
- `text-sm`: 文字サイズを14pxに設定
- `text-base`: 文字サイズを16pxに設定
- `text-lg`: 文字サイズを18pxに設定
- `text-xl`: 文字サイズを20pxに設定
- `text-2xl`: 文字サイズを24pxに設定
- `text-3xl`: 文字サイズを30pxに設定

**使えないパターン**
- `font-xs`: フォントサイズを12pxに設定（使えない）
- `font-sm`: フォントサイズを14pxに設定（使えない）

### <font color="#1e90ff">ボーダー</font>
- `border`: 全体のボーダー
- `border-{side}`: 特定の辺のボーダー（`border-t`, `border-b`, `border-l`, `border-r`）
- `border-{width}`: ボーダーの幅（`border-2`, `border-4`など）
- `rounded-{size}`: ボーダーの角を丸くする（`rounded-lg`, `rounded-full`など）

**使用例**
- `border`: 全体にボーダーを設定
- `border-t-2`: 上に2のボーダーを設定
- `border-b-4`: 下に4のボーダーを設定
- `rounded-lg`: 角を大きく丸くする
- `rounded-full`: 角を完全に丸くする

### <font color="#1e90ff">背景</font>
- `bg-{color}`: 背景色
- `bg-opacity-{n}`: 背景の不透明度

**使用例**
- `bg-green-500`: 背景色を緑に設定
- `bg-opacity-75`: 背景の不透明度を75%に設定
- `bg-gradient-to-r`: 右方向へのグラデーション背景
- `bg-fixed`: 固定背景
- `bg-cover`: 背景をカバーする

### <font color="#1e90ff">フレックスボックスとグリッド</font>
- `flex`: フレックスコンテナ
- `inline-flex`: インラインフレックスコンテナ
- `flex-{direction}`: フレックスアイテムの方向（`flex-row`, `flex-col`など）
- `flex-wrap`: フレックスアイテムの折り返し
- `items-{alignment}`: フレックスアイテムの整列（`items-center`, `items-start`など）
- `justify-{alignment}`: フレックスアイテムの配置（`justify-center`, `justify-between`など）
- `gap-{n}`: グリッドとフレックスアイテム間のギャップ

**使用例**
- `flex`: フレックスコンテナを設定
- `inline-flex`: インラインフレックスコンテナを設定
- `flex-row`: フレックスアイテムを横方向に配置
- `items-center`: フレックスアイテムを中央に整列
- `justify-between`: フレックスアイテムを両端に配置

### <font color="#1e90ff">表示と配置</font>
- `hidden`: 非表示
- `block`: ブロック表示
- `inline-block`: インラインブロック表示
- `inline`: インライン表示
- `flex`: フレックス表示
- `grid`: グリッド表示
- `table`: テーブル表示
- `absolute`: 絶対位置
- `relative`: 相対位置
- `fixed`: 固定位置
- `sticky`: スティッキー位置

**使用例**
- `hidden`: 要素を非表示にする
- `block`: 要素をブロック表示にする
- `inline-block`: 要素をインラインブロック表示にする
- `absolute`: 要素を絶対位置に配置
- `relative`: 要素を相対位置に配置

### <font color="#1e90ff">その他のユーティリティ</font>
- `shadow-{size}`: シャドウ（`shadow-sm`, `shadow-md`, `shadow-lg`など）
- `opacity-{n}`: 不透明度
- `transition`: トランジション
- `transform`: 変形（`scale`, `rotate`など）
- `z-{n}`: z-index

**使用例**
- `shadow-md`: 中程度のシャドウを設定
- `opacity-50`: 不透明度を50%に設定
- `transition-all`: 全てのプロパティにトランジションを適用
- `transform scale-105`: 要素を105%に拡大
- `z-10`: z-indexを10に設定

### <font color="#1e90ff">単位</font>
- `{n}px`: ピクセル単位
- `{n}rem`: rem単位
- `{n}%`: パーセント単位
- `{n}vh`: ビューポート高さ単位
- `{n}vw`: ビューポート幅単位

**使用例**
- `w-1/2`: 幅を50%に設定
- `h-1/3`: 高さを33.333%に設定
- `w-1/4`: 幅を25%に設定
- `h-1/6`: 高さを16.666%に設定
- `w-full`: 幅を100%に設定

### <font color="#1e90ff">スペーシング（マージン、パディング）</font>
Tailwind CSSでは、スペーシングのためにさまざまなプリセット値が用意されています。基本的な単位はremベースですが、特定の値にはピクセルやパーセントも使用されます。
- `0`: `0rem` (0px)
- `1`: `0.25rem` (4px)
- `2`: `0.5rem` (8px)
- `3`: `0.75rem` (12px)
- `4`: `1rem` (16px)
- `5`: `1.25rem` (20px)
- `6`: `1.5rem` (24px)
- `8`: `2rem` (32px)
- `10`: `2.5rem` (40px)
- `12`: `3rem` (48px)
- `16`: `4rem` (64px)
- `20`: `5rem` (80px)
- `24`: `6rem` (96px)
- `32`: `8rem` (128px)
- `40`: `10rem` (160px)
- `48`: `12rem` (192px)
- `56`: `14rem` (224px)
- `64`: `16rem` (256px)
- `px`: `1px` (1ピクセル)
- `0.5`: `0.125rem` (2px)
- `1.5`: `0.375rem` (6px)
- `2.5`: `0.625rem` (10px)
- `3.5`: `0.875rem` (14px)

**使用例**
- `m-4`: 全体に4のマージン
- `mt-2`: 上に2のマージン
- `mb-6`: 下に6のマージン
- `px-8`: 左右に8のパディング
- `py-4`: 上下に4のパディング

### <font color="#1e90ff">レスポンシブデザイン</font>
Tailwind CSSでは、レスポンシブデザインを簡単に実現するためにブレークポイントが用意されています。以下はそのブレークポイントです。

- `sm`: 640px 以上
- `md`: 768px 以上
- `lg`: 1024px 以上
- `xl`: 1280px 以上
- `2xl`: 1536px 以上

**使用例**
- `sm:bg-red-500`: 640px 以上の画面幅で背景色を赤に設定
- `md:text-lg`: 768px 以上の画面幅で文字サイズを大きく設定
- `lg:w-1/2`: 1024px 以上の画面幅で幅を50%に設定
- `xl:p-8`: 1280px 以上の画面幅でパディングを8に設定
- `2xl:mt-4`: 1536px 以上の画面幅で上のマージンを4に設定

### <font color="#1e90ff">auto</font>
- `m-auto`: マージンを自動設定
- `mx-auto`: 左右のマージンを自動設定
- `my-auto`: 上下のマージンを自動設定
- `w-auto`: 幅を自動設定
- `h-auto`: 高さを自動設定

**使用例**
- `m-auto`: 要素を中央に配置
- `mx-auto`: 要素を左右中央に配置
- `my-auto`: 要素を上下中央に配置
- `w-auto`: 幅をコンテンツに合わせて自動調整
- `h-auto`: 高さをコンテンツに合わせて自動調整