tailwindcss-mobile-first

Tailwind モバイルファーストスキル

Tailwind CSS のモバイルファーストなレスポンシブデザイン（ブレークポイント戦略、流動的なタイポグラフィと間隔、タッチターゲット、コンテナクエリ、安全領域、レスポンシブレイアウト、メディア、ナビゲーション、モバイルパフォーマンス）にこのスキルを使用します。

このスキルを使用する場面

ユーザーがフロントマターのトリガーで対象となる作業を依頼した場合に使用します。特に、この分野の実装ガイダンス、デバッグ、アーキテクチャの選択、本番環境向けの堅牢化、パフォーマンスが重要な判断に使用してください。このオーケストレーターから始め、依頼された詳細度に合うリファレンスファイルを読み込みます。

基本的なワークフロー

1. モバイルのベースラインには接頭辞のないユーティリティを使い、その後 sm:、md:、lg:、xl:、2xl: で段階的に拡張します。
2. ブレークポイントはデバイス名ではなくコンテンツのニーズに基づいて選びます。デザインシステムで必要な場合に限り、Tailwind v4 のテーマブレークポイントを上書きします。
3. ブレークポイント間で滑らかに拡大しつつ、rem + vw によってアクセシビリティを維持するため、clamp() を使用して流動的なタイポグラフィと間隔を設定します。
4. 推奨ターゲットサイズの 44px、十分な間隔、明確なラベル、モバイル向けのナビゲーションパターンを用いて、インタラクティブ要素をタッチ操作に適したものにします。
5. ビューポート幅ではなくコンポーネント自身の幅に応じて変化させる必要がある再利用可能なコンポーネントには、コンテナクエリを使用します。
6. アスペクト比ユーティリティでメディアの寸法を確保し、ノッチ付きデバイスや固定モバイル UI には安全領域ユーティリティを使用します。

主な注意点

• 接頭辞のない Tailwind クラスはすべてのサイズで適用されます。ブレークポイント接頭辞付きのユーティリティは、そのブレークポイント以上で適用されます。
• クラスをデスクトップファーストの順序で並べても、デザインがデスクトップファーストになるわけではありませんが、意図が分かりにくくなり、バグが増えることがあります。
• ホバーのみのインタラクションはタッチデバイスでは機能しません。ホバー状態とフォーカス状態、アクティブ状態、または明示的な操作を組み合わせてください。
• アスペクト比を事前に確保していない動画や画像は、Cumulative Layout Shift を引き起こす可能性があります。
• 固定式のボトムナビゲーションでは、安全領域のインセットを考慮し、コンテンツとの重なりを避けるためにコンテンツのパディングを追加する必要があります。

リファレンスマップ

• references/mobile-first-complete-guide.md - 哲学、ブレークポイント、流動的なタイポグラフィと間隔、タッチターゲット、コンテナクエリ、レイアウト、レスポンシブ画像とタイポグラフィ、ナビゲーション、安全領域、モバイルパフォーマンス、テスト、レスポンシブ動画のパターンを網羅した、完全なオリジナルガイドです。

回答の指針

• 互換性やパフォーマンス上の明確な理由がない限り、ユーザーが現在使用しているフレームワーク、ライブラリ、ツールの選択を尊重します。
• そのままコピーして使えるコードは、依頼された作業に必要なものだけを提示してください。それ以外の場合は、該当するリファレンスのセクションを案内します。
• 本番環境のワークフローでは、トレードオフ、失敗パターン、検証手順を明示します。
• 気の利いたマイクロ最適化より、アクセシブルで保守しやすく、効果を測定できる解決策を優先します。