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

Tailwind CSSブレークポイント

Tailwind CSSはモバイルファーストのブレークポイントシステムを使用しています。プレフィックスなしのスタイルはすべての画面サイズに適用され、ブレークポイントプレフィックスはその幅以上に適用されます。

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

プレフィックス	最小幅	典型的なデバイス
（なし）	0px	すべて（モバイルファーストベース）
sm	640px	横向きの大型スマートフォン
md	768px	タブレット
lg	1024px	小型ノートPC、横向きタブレット
xl	1280px	ノートPC、デスクトップ
2xl	1536px	大型デスクトップ

使用パターン

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <!-- レスポンシブグリッド -->
</div>

カスタマイズ

tailwind.config.jsで：

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

ブレークポイントのテスト

ブラウザDevToolsを開いてビューポートをリサイズするか、このスクリーン情報表示ツールを使用して現在アクティブなブレークポイントをリアルタイムで確認できます。