レスポンシブデザイン

レスポンシブユーティリティのバリアントを使用して、適応型ユーザーインターフェースを構築する。

概要

Tailwindのすべてのユーティリティクラスは、異なるブレークポイントで条件付きで適用できるため、HTMLを離れることなく複雑なレスポンシブインターフェースを簡単に構築できます。

まず、ドキュメントの<head>にビューポートメタタグを追加したことを確認してください

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

特定のブレークポイントでのみ有効になるユーティリティを追加するには、ユーティリティにブレークポイント名をプレフィックスとして付け、その後に:文字を続けます。

HTML

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

デフォルトでは、一般的なデバイスの解像度に着想を得た5つのブレークポイントがあります。

ブレークポイントプレフィックス	最小幅	CSS
`sm`	40rem (640px)	`@media (width >= 40rem) { ... }`
`md`	48rem (768px)	`@media (width >= 48rem) { ... }`
`lg`	64rem (1024px)	`@media (width >= 64rem) { ... }`
`xl`	80rem (1280px)	`@media (width >= 80rem) { ... }`
`2xl`	96rem (1536px)	`@media (width >= 96rem) { ... }`

これは、フレームワーク内のすべてのユーティリティクラスで機能します。つまり、特定のブレークポイントですべてを変更できます。文字間隔やカーソルのスタイルなど。

小さな画面ではスタックレイアウトを使用し、大きな画面ではサイドバイサイドレイアウトを使用するマーケティングページコンポーネントの簡単な例を次に示します。

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="/img/building.jpg"
        alt="Modern building architecture"
      />
    </div>
    <div class="p-8">
      <div class="text-sm font-semibold tracking-wide text-indigo-500 uppercase">Company retreats</div>
      <a href="#" class="mt-1 block text-lg leading-tight font-medium text-black hover:underline">
        Incredible accommodation for your team
      </a>
      <p class="mt-2 text-gray-500">
        Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of
        places to do just that.
      </p>
    </div>
  </div>
</div>

上記の例の仕組みを次に示します。

デフォルトでは、外側のdivはdisplay: blockですが、md:flexユーティリティを追加すると、中程度の画面以上でdisplay: flexになります。
親がフレックスコンテナの場合、画像が縮小しないようにする必要があります。そのため、md:shrink-0を追加して、中程度の画面以上での縮小を防ぎます。技術的には、小さな画面では何も実行しないため、shrink-0を使用することもできましたが、md画面でのみ重要なため、クラス名でそれを明確にすることをお勧めします。
小さな画面では、画像はデフォルトで自動的に全幅になります。中程度の画面以上では、幅を固定サイズに制限し、md:h-full md:w-48を使用して画像の高さが最大になるようにしました。

この例では1つのブレークポイントのみを使用しましたが、sm、lg、xl、または2xlレスポンシブプレフィックスを使用して、他のサイズでこのコンポーネントを簡単にカスタマイズできます。

モバイルファーストでの作業

Tailwindは、Bootstrapなどの他のフレームワークで使い慣れている可能性のあるモバイルファーストのブレークポイントシステムを使用しています。

これは、プレフィックスなしのユーティリティ（uppercaseなど）はすべての画面サイズで有効になり、プレフィックス付きのユーティリティ（md:uppercaseなど）は指定されたブレークポイント以上でのみ有効になることを意味します。

モバイル画面をターゲットにする

このアプローチで人々が最も驚くのは、モバイル向けに何かをスタイル設定するには、sm:プレフィックス付きバージョンではなく、プレフィックスなしのユーティリティバージョンを使用する必要があることです。sm:を「小さな画面上」という意味で考えるのではなく、「小さなブレークポイントで」と考えてください。

モバイルデバイスをターゲットにするためにsm:を使用しないでください

HTML

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

プレフィックスなしのユーティリティを使用してモバイルをターゲットにし、より大きなブレークポイントでそれらをオーバーライドします

HTML

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

このため、多くの場合、デザインのモバイルレイアウトを最初に実装し、次にsm画面、md画面などに適した変更を重ねていくのが良い考えです。

ブレークポイント範囲をターゲットにする

デフォルトでは、md:flexのようなルールによって適用されたスタイルは、そのブレークポイントで適用され、より大きなブレークポイントでも適用されたままになります。

特定のブレークポイント範囲がアクティブな場合にのみユーティリティを適用したい場合は、mdのようなレスポンシブバリアントをmax-*バリアントとスタックして、そのスタイルを特定の範囲に制限します

HTML

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

Tailwindは各ブレークポイントに対応するmax-*バリアントを生成するため、すぐに使用できる次のバリアントがあります

バリアント	メディアクエリ
`max-sm`	`@media (width < 40rem) { ... }`
`max-md`	`@media (width < 48rem) { ... }`
`max-lg`	`@media (width < 64rem) { ... }`
`max-xl`	`@media (width < 80rem) { ... }`
`max-2xl`	`@media (width < 96rem) { ... }`

単一のブレークポイントをターゲットにする

単一のブレークポイントをターゲットにするには、mdのようなレスポンシブバリアントを次のブレークポイントのmax-*バリアントとスタックして、そのブレークポイントの範囲をターゲットにします

HTML

<div class="md:max-lg:flex">
  <!-- ... -->
</div>

詳細については、ブレークポイント範囲のターゲット設定についてお読みください。

カスタムブレークポイントの使用

テーマのカスタマイズ

--breakpoint-*テーマ変数を使用してブレークポイントをカスタマイズします

app.css

@import "tailwindcss";
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}

これにより、2xlブレークポイントがデフォルトの96remではなく100remを使用するように更新され、マークアップで使用できる新しいxsおよび3xlブレークポイントが作成されます

HTML

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  <!-- ... -->
</div>

ブレークポイントを定義するために常に同じ単位を使用することが重要です。そうしないと、生成されたユーティリティが予期しない順序でソートされ、ブレークポイントクラスが予期しない方法で互いにオーバーライドする可能性があります。

Tailwindはデフォルトのブレークポイントにremを使用しているため、デフォルトに追加のブレークポイントを追加する場合は、remも使用してください。

テーマのカスタマイズの詳細については、テーマのドキュメントをご覧ください。

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

デフォルトのブレークポイントを削除するには、その値をinitialキーワードにリセットします

app.css

@import "tailwindcss";
@theme {
  --breakpoint-2xl: initial;
}

--breakpoint-*: initialを使用してすべてのデフォルトのブレークポイントをリセットし、ブレークポイントを最初から定義することもできます

app.css

@import "tailwindcss";
@theme {
  --breakpoint-*: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
}

デフォルトのテーマ値の削除の詳細については、テーマのドキュメントをご覧ください。

任意の値の使用

テーマに含めるのが適切でない1回限りのブレークポイントを使用する必要がある場合は、minまたはmaxバリアントを使用して、任意の値をオンザフライでカスタムブレークポイントを生成します。

<div class="max-[600px]:bg-sky-300 min-[320px]:text-center">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、任意の値のドキュメントをご覧ください。

コンテナクエリ

コンテナクエリとは？

コンテナクエリは、ビューポート全体のサイズではなく、親要素のサイズに基づいて何かをスタイル設定できる最新のCSS機能です。コンポーネントで使用可能な実際のスペースに基づいて変更できるため、移植性と再利用性が大幅に向上したコンポーネントを構築できます。

基本的な例

@containerクラスを使用して要素をコンテナとしてマークし、@smや@mdのようなバリアントを使用して、コンテナのサイズに基づいて子要素をスタイル設定します

HTML

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

ブレークポイントバリアントと同様に、コンテナクエリはTailwind CSSでモバイルファーストであり、ターゲットコンテナサイズ以上で適用されます。

最大幅コンテナクエリ

@max-smや@max-mdのようなバリアントを使用して、特定のコンテナサイズより下のスタイルを適用します

HTML

<div class="@container">
  <div class="flex flex-row @max-md:flex-col">
    <!-- ... -->
  </div>
</div>

コンテナクエリ範囲

通常のコンテナクエリバリアントを最大幅コンテナクエリバリアントとスタックして、特定の範囲をターゲットにします

HTML

<div class="@container">
  <div class="flex flex-row @sm:@max-md:flex-col">
    <!-- ... -->
  </div>
</div>

名前付きコンテナ

複数のネストされたコンテナを使用する複雑なデザインの場合、@container/{name}を使用してコンテナに名前を付け、@sm/{name}や@md/{name}のようなバリアントで特定のコンテナをターゲットにできます

HTML

<div class="@container/main">
  <!-- ... -->
  <div class="flex flex-row @sm/main:flex-col">
    <!-- ... -->
  </div>
</div>

これにより、最も近いコンテナだけでなく、遠いコンテナのサイズに基づいて何かをスタイル設定することが可能になります。

カスタムコンテナサイズの使用

--container-*テーマ変数を使用してコンテナサイズをカスタマイズします

app.css

@import "tailwindcss";
@theme {
  --container-8xl: 96rem;
}

これにより、マークアップで使用できる新しい8xlコンテナクエリバリアントが追加されます

HTML

<div class="@container">
  <div class="flex flex-col @8xl:flex-row">
    <!-- ... -->
  </div>
</div>

テーマのカスタマイズの詳細については、テーマのドキュメントをご覧ください。

任意の値の使用

テーマに追加したくない1回限りのコンテナクエリサイズには、@min-[475px]や@max-[960px]のようなバリアントを使用します

HTML

<div class="@container">
  <div class="flex flex-col @min-[475px]:flex-row">
    <!-- ... -->
  </div>
</div>

コンテナクエリユニットの使用

コンテナサイズを参照するために、コンテナクエリの長さ単位（cqwなど）を他のユーティリティクラスで任意の値として使用します

HTML

<div class="@container">
  <div class="w-[50cqw]">
    <!-- ... -->
  </div>
</div>

コンテナサイズのリファレンス

デフォルトでは、Tailwindには16rem (256px)から80rem (1280px)までのコンテナサイズが含まれています

バリアント	最小幅	CSS
`@3xs`	16rem (256px)	`@container (width >= 16rem) { … }`
`@2xs`	18rem (288px)	`@container (width >= 18rem) { … }`
`@xs`	20rem (320px)	`@container (width >= 20rem) { … }`
`@sm`	24rem (384px)	`@container (width >= 24rem) { … }`
`@md`	28rem (448px)	`@container (width >= 28rem) { … }`
`@lg`	32rem (512px)	`@container (width >= 32rem) { … }`
`@xl`	36rem (576px)	`@container (width >= 36rem) { … }`
`@2xl`	42rem (672px)	`@container (width >= 42rem) { … }`
`@3xl`	48rem (768px)	`@container (width >= 48rem) { … }`
`@4xl`	56rem (896px)	`@container (width >= 56rem) { … }`
`@5xl`	64rem (1024px)	`@container (width >= 64rem) { … }`
`@6xl`	72rem (1152px)	`@container (width >= 72rem) { … }`
`@7xl`	80rem (1280px)	`@container (width >= 80rem) { … }`

このページについて