tailwind-responsive-ui

Tailwind CSS のレスポンシブ UI に関するコミュニティのベストプラクティス

Adam Wathan と Steve Schoger による Refactoring UI および最新のレスポンシブデザインパターンに基づく、Tailwind CSS アプリケーション向けの包括的なレスポンシブ対応ガイドです。8 つのカテゴリにわたる 49 のルールを収録し、自動リファクタリングやコード生成を支援するため、影響度の高い順に優先順位を付けています。

適用する場面

次のような場合に、これらのガイドラインを参照してください。

• 既存の UI をさまざまな画面サイズに対応させる場合
• Tailwind CSS で新しいレスポンシブレイアウトを構築する場合
• デスクトップ専用のインターフェースをリファクタリングしてモバイルに対応させる場合
• ブレークポイント、余白、タイポグラフィに関する問題について、レスポンシブコードを確認する場合
• ナビゲーション、フォーム、データテーブルをタッチデバイス向けに調整する場合

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	ブレークポイント戦略	CRITICAL	bp-
2	レイアウトの変換	CRITICAL	layout-
3	レスポンシブな余白	HIGH	rspac-
4	流動的なタイポグラフィ	HIGH	fluid-
5	ナビゲーションパターン	MEDIUM-HIGH	nav-
6	タッチとインタラクション	MEDIUM	touch-
7	レスポンシブメディア	MEDIUM	rmedia-
8	データの調整	LOW-MEDIUM	data-

クイックリファレンス

1. ブレークポイント戦略 (CRITICAL)

• bp-mobile-first-default - モバイルファーストのブレークポイント方向を使用する
• bp-content-driven-breakpoints - コンテンツが崩れる位置にブレークポイントを設定する
• bp-avoid-device-widths - デバイス固有のブレークポイント値を避ける
• bp-consolidate-breakpoints - ブレークポイントを 3 つまたは 4 つに統合する
• bp-min-width-over-max - ブレークポイントには max-width ではなく min-width を使用する
• bp-debug-breakpoints - 開発中に視覚的なブレークポイントインジケーターを使用する

2. レイアウトの変換 (CRITICAL)

• layout-stack-to-row - モバイルでは要素を縦に並べ、デスクトップでは横に並べる
• layout-sidebar-collapse - モバイルではサイドバーを上部または下部に折りたたむ
• layout-grid-column-reduction - ブレークポイントが狭くなるにつれてグリッドの列数を減らす
• layout-holy-grail-responsive - Grid でレスポンシブなホーリーグレイルレイアウトを使用する
• layout-sticky-to-static - モバイルではスティッキー要素を静的配置に変更する
• layout-fixed-to-relative - モバイルでは固定配置を相対配置に置き換える
• layout-aspect-ratio-containers - レスポンシブコンテナーにアスペクト比を使用する

3. レスポンシブな余白 (HIGH)

• rspac-scale-padding-per-bp - ブレークポイントごとにパディングを個別に調整する
• rspac-responsive-gap - Grid と Flex の間隔にレスポンシブな gap を使用する
• rspac-compact-mobile-generous-desktop - モバイルではコンパクトな余白、デスクトップではゆとりのある余白を使用する
• rspac-section-spacing - セクションの区切りの間隔をビューポートに応じて調整する
• rspac-inline-to-stack-spacing - モバイルではインラインの間隔を縦積みの間隔に変更する
• rspac-container-padding - レスポンシブなコンテナーパディングを使用する

4. 流動的なタイポグラフィ（高）

• fluid-clamp-font-size - clamp() を使ってフォントサイズを流動的に調整する
• fluid-responsive-line-height - フォントサイズの拡大に合わせて行の高さを詰める
• fluid-responsive-measure - 1 行の長さを 45～75 文字に制限する
• fluid-scale-headings-independently - ブレークポイントごとに見出しのサイズを個別に調整する
• fluid-responsive-letter-spacing - レスポンシブな見出しに合わせて文字間隔を調整する
• fluid-type-scale - レスポンシブな文字サイズのスケールを使う

5. ナビゲーションパターン（中～高）

• nav-horizontal-to-hamburger - モバイルでは横並びのナビゲーションをハンバーガーメニューに切り替える
• nav-tab-bar-mobile - モバイルの主要なナビゲーションに下部のタブバーを使う
• nav-breadcrumb-collapse - モバイルではパンくずリストを省略表示する
• nav-sidebar-drawer - モバイルではサイドバーのナビゲーションを画面外から開くドロワーに切り替える
• nav-dropdown-to-fullscreen - モバイルではドロップダウンメニューを全幅に広げる
• nav-sticky-header-compact - モバイルではスクロール時にヘッダーをコンパクトにする

6. タッチとインタラクション（中）

• touch-min-touch-target - モバイルではタッチターゲットを最低 44px 確保する
• touch-hover-to-tap - ホバー操作をタップしやすい代替操作に置き換える
• touch-swipe-affordance - 横スクロールでスワイプできることを視覚的に示す
• touch-scroll-snap-mobile - モバイルのカルーセル風インターフェースにスクロールスナップを使う
• touch-input-sizing-mobile - iOS でのズームを防ぐため、フォーム入力欄のサイズを調整する
• touch-focus-visible-touch - タッチ操作に適したフォーカススタイルに focus-visible を使う

7. レスポンシブメディア（中）

• rmedia-responsive-images - object-fit を使って画像サイズをレスポンシブに調整する
• rmedia-video-aspect-ratio - ブレークポイントをまたいで動画のアスペクト比を維持する
• rmedia-icon-size-scaling - アイコンをフォントサイズではなくブレークポイントに応じて拡大縮小する
• rmedia-avatar-responsive - 用途とブレークポイントに応じてアバターのサイズを調整する
• rmedia-background-image-bp - ブレークポイントで背景画像を切り替える
• rmedia-embed-responsive - コンテナーの制約を使って埋め込みコンテンツをレスポンシブにする

8. データの適応（低～中）

• data-table-to-cards - モバイルではテーブルをカードに変換する
• data-horizontal-scroll-table - 密度の高いデータテーブルに横スクロールを使う
• data-responsive-data-grid - 画面サイズに応じてデータグリッドの密度を調整する
• data-list-density-mobile - モバイルではリスト項目の密度を高める
• data-truncate-overflow - モバイルでははみ出したテキストを省略する
• data-responsive-form-layout - モバイルではフォーム項目を縦に並べ、デスクトップではグリッドを使う

使用方法

詳細な説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリー構成と影響レベル
• ルールテンプレート - 新しいルールを追加するためのテンプレート

参照ファイル

ファイル	説明
references/_sections.md	カテゴリの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンと参照情報