Tailwind CSSブレークポイント：デフォルト値とデバイスマッピング

Tailwind CSSブレークポイントリファレンス

Tailwind CSSは5つのデフォルトブレークポイントを持つモバイルファーストブレークポイントシステムを使用します。各ブレークポイントはmin-widthメディアクエリのしきい値を定義します。

デフォルトブレークポイント

プレフィックス	最小幅	CSSメディアクエリ
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

デバイスマッピング

• sm未満 (< 640px)：ポートレートのすべてのスマートフォン — iPhone SE から iPhone 16 Pro Max、すべてのSamsung Galaxy S、すべてのPixel
• sm (640-767px)：ランドスケープの大型スマートフォン、一部の小型タブレット
• md (768-1023px)：iPadポートレート、Galaxy Tabポートレート、Surface Go
• lg (1024-1279px)：iPad Proランドスケープ、Chromebook、小型ノートPC
• xl (1280-1535px)：MacBook Air、標準ノートPC、Surface Laptop
• 2xl (1536px+)：MacBook Pro 16"、デスクトップモニター、4Kディスプレイ

使用例

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <!-- カード -->
</div>

これにより、スマートフォンで1カラム、タブレットで2カラム、ノートPCで3カラム、デスクトップで4カラムのレスポンシブグリッドが作成されます。

ブレークポイントのカスタマイズ

tailwind.config.jsでブレークポイントをカスタマイズできます：

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

Max-Widthバリアント

Tailwindはmax-*プレフィックスを使用したmax-widthブレークポイントもサポートしています：

<div class="max-md:hidden">
  <!-- 768px未満で非表示 -->
</div>