Tailwind CSS レスポンシブデザイン

18.4.1. ブレイクポイント戦略

Tailwind CSS のデフォルトブレイクポイントを使用します。

プレフィックス	最小幅	対象デバイス
sm:	640px	小型タブレット
md:	768px	タブレット
lg:	1024px	小型デスクトップ
xl:	1280px	デスクトップ
2xl:	1536px	大型デスクトップ

• デフォルトブレイクポイントを優先的に使用しなければなりません。
• カスタムブレイクポイントはデフォルト値で対応できない場合にのみ追加します。

// tailwind.config.ts — カスタムブレイクポイント追加例
export default {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
} satisfies Config

• カスタムブレイクポイントは必ず theme.extend.screens に追加します。
• デフォルトブレイクポイントを上書きする theme.screens の直接修正は禁止します。

---

18.4.2. モバイルファースト原則

デフォルトスタイルはモバイル画面を基準に記述します。ブレイクポイントプレフィックスを使用して、より広い画面にスタイルを拡張します。

<template>
  <div class="px-4 py-6 sm:px-6 md:px-8 lg:px-12">
    <h1 class="text-xl font-bold sm:text-2xl lg:text-3xl">
      ページタイトル
    </h1>
    <p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-lg">
      本文の説明です。
    </p>
  </div>
</template>

• プレフィックスなしのクラスがモバイルのデフォルト値です。
• ブレイクポイントは sm: -> md: -> lg: -> xl: -> 2xl: の順序で拡張します。
• max-* バリアントは使用しません。モバイルファーストアプローチで統一します。

---

18.4.3. レスポンシブユーティリティパターン

レスポンシブグリッド

<template>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    <div
      v-for="item in items"
      :key="item.id"
      class="rounded-lg border border-gray-200 p-4"
    >
      {{ item.title }}
    </div>
  </div>
</template>

レスポンシブタイポグラフィ

要素	モバイル	sm	lg
ページタイトル	text-xl	text-2xl	text-3xl
セクションタイトル	text-lg	text-xl	text-2xl
本文	text-sm	text-base	text-base
キャプション	text-xs	text-sm	text-sm

レスポンシブ表示/非表示

<template>
  <nav class="flex items-center justify-between px-4 py-3">
    <!-- モバイル専用: ハンバーガーメニュー -->
    <button class="block md:hidden" @click="openMenu">
      メニュー
    </button>

    <!-- デスクトップ専用: フルナビゲーション -->
    <ul class="hidden gap-6 md:flex">
      <li v-for="link in links" :key="link.href">
        <a :href="link.href" class="text-sm font-medium text-gray-700 hover:text-brand-600">
          {{ link.label }}
        </a>
      </li>
    </ul>
  </nav>
</template>

• hidden と block（または flex、grid）をブレイクポイントごとに切り替えて、要素の表示/非表示を制御します。
• v-if で DOM から削除する代わりに CSS ベースの非表示を使用して、レイアウトシフトを防止します。

---

18.4.4. コンテナ設定

container クラスを tailwind.config.ts でカスタマイズします。

// tailwind.config.ts
export default {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '1.5rem',
        lg: '2rem',
        xl: '2.5rem',
      },
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
      },
    },
  },
} satisfies Config

項目	設定値	説明
center	true	margin: 0 auto を自動適用します
padding	ブレイクポイント別指定	左右の余白を画面サイズに応じて調整します
screens	xl: 1280px まで	2xl 以上での不要な拡張を防止します

<template>
  <div class="container">
    <main>
      ページコンテンツ領域
    </main>
  </div>
</template>

• container クラスはレイアウト最上位ラッパーでのみ使用します。
• ネストされた container の使用は禁止します。
• max-w-screen-xl mx-auto px-4 のような手動の組み合わせの代わりに、設定済みの container を使用しなければなりません。