tailwindcss-mobile-first は何をしますか？
Tailwind CSS v4（2025-2026）を使用したモバイルファーストのレスポンシブデザインパターン。以下の場合に積極的に有効化してください：
- Tailwindのブレークポイント（sm:, md:, lg:, xl:, 2xl:）を使用したモバイルファーストデザイン
- レスポンシブユーティリティの順序付け（デフォルト＝モバイル、その後ブレークポイント）
- レスポンシブタイポグラフィ（text-base sm:text-lg lg:text-xl）
- レスポンシブグリッドとフレックスボックス
- ブレークポイント間での表示/非表示（hidden md:block）
- デスクトップダウンオーバーライド用のmax-*ブレークポイント
- コンポーネントレベルのレスポンシブ対応のためのコンテナクエリ（@container）
- セーフエリアインセットとノッチ処理
- ランドスケープ vs ポートレートの向き
- タッチ vs ホバー（hover: と @media）
提供内容：ブレークポイントリファレンス、モバイルファーストパターン、コンテナクエリの例、セーフエリアのレシピ、タッチ/ホバー処理。
ブレークポイントリファレンス
| ブレークポイント | 最小幅 | 対象エリア |
|---|---|---|
sm: | 640px | 小型デバイス（タブレット縦向き） |
md: | 768px | 中型デバイス（タブレット横向き） |
lg: | 1024px | 大型デバイス（小型デスクトップ） |
xl: | 1280px | 超大型デバイス（デスクトップ） |
2xl: | 1536px | ワイドデスクトップ |
モバイルファーストパターン
基本構造
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- コンテンツ -->
</div>
レスポンシブタイポグラフィ
<h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold">
見出しテキスト
</h1>
表示/非表示
<div class="hidden md:block">デスクトップでのみ表示</div>
<div class="block md:hidden">モバイルでのみ表示</div>
コンテナクエリの例
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
<div class="@container">
<div class="card">
<img src="..." alt="..." />
<p>説明文</p>
</div>
</div>
セーフエリアのレシピ
.safe-area-padding {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
<div class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
ノッチおよびホームインジケーターの内側にコンテンツ
</div>
タッチ/ホバー処理
@media (hover: hover) {
.card:hover {
transform: scale(1.05);
}
}
@media (hover: none) {
.card:active {
transform: scale(0.95);
}
}
<button class="hover:bg-blue-700 active:bg-blue-800">
タップ/クリック
</button>
向きの処理
@media (orientation: landscape) {
.container {
flex-direction: row;
}
}
@media (orientation: portrait) {
.container {
flex-direction: column;
}
}
max-* ブレークポイント（デスクトップダウン）
<div class="max-md:bg-gray-100 md:bg-white">
中サイズ以下の場合にグレーの背景
</div>
ベストプラクティス
- 常にモバイルから始める: デフォルトのユーティリティはモバイル向けに記述し、ブレークポイントで拡張する
- コンポーネントベースの設計: ページ全体ではなく、コンポーネントレベルでレスポンシブを考える
- コンテナクエリを活用: 親のサイズに依存するコンポーネントではコンテナクエリを使用
- アクセシビリティを考慮: タッチターゲットのサイズは最低44x44pxを確保
- パフォーマンス: 不要なオーバーライドを避け、ユーティリティの使用を最小限に