【Tailwind和訳】CORE CONCEPTS/Responsive Design

この記事について

この記事は、CORE CONCEPTS/Responsive Designの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

レスポンシブデザイン

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

---

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

デフォルトでは、一般的なデバイスの解像度にインスパイアされた 5 つのブレークポイントが用意されています:

ブレークポイントの接頭辞	最小の幅	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
zxl	1536px	@media (min-width: 1536px) { ... }
特定のブレークポイントでのみ有効なユーティリティーを追加するには、ユーティリティーの前にブレークポイント名を付け、その後に:の文字を付けるだけでよい:

<!-- 幅はデフォルトで16、中画面では32、大画面では48となっています。 -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

これは、フレームワークのすべてのユーティリティークラスに適用されます。つまり、文字の間隔やカーソルのスタイルなど、任意のブレークポイントで文字通り何でも変更することができます。
 
ここでは、小さな画面ではスタックレイアウト、大きな画面ではサイドバイサイドレイアウトを採用したマーケティングページコンポーネントの簡単な例をご紹介します（動作を確認するにはブラウザのサイズを変更してください）:

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="/img/store.jpg"
        alt="Man looking at item at a store"
      />
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline"
        >Finding customers for your new business</a
      >
      <p class="mt-2 text-gray-500">
        Getting a new business off the ground is a lot of hard work. Here are five ideas you can use
        to find your first customers.
      </p>
    </div>
  </div>
</div>

上の例では、以下のようになっています:

• デフォルトでは、外側のdivはdisplay: blockですが、md:flexユーティリティを追加することで、中程度の画面以上ではdisplay: flexになります。
• 親が flex container の場合は、画像が縮小しないようにしたいので、md:flex-shrink-0 を追加して、中程度以上の画面で縮小しないようにしています。技術的には、小さい画面では何もしないので flex-shrink-0 とすることもできましたが、md 画面でのみ問題となるので、クラス名で明確にしておくのが良いでしょう。
• 小さな画面では、画像はデフォルトで自動的に全幅になります。中型スクリーン以上では、幅を固定サイズにして、md:h-full md:w-48で画像がフルハイトになるようにしています。

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

---

モバイルファースト

デフォルトでは、Tailwind はモバイルファーストのブレークポイントシステムを採用しています。これは Bootstrap のような他のフレームワークで使われているものと同様です。

これが意味するところは、接頭辞のないユーティリティー（uppercaseなど）はすべての画面サイズで効果を発揮し、接頭辞のあるユーティリティー（md:uppercaseなど）は指定されたブレークポイント以上でのみ効果を発揮するということです。

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

この方法でよく驚かれるのは、モバイル用にスタイルを変更するには、ユーティリティーの sm: 接頭辞付きバージョンではなく、接頭辞なしバージョンを使用する必要があるということです。sm:は「小さな画面で」という意味ではなく、「小さなブレークポイントで」という意味だと考えてください。

❌ モバイル端末を対象とした sm:を使用しない

<!-- これは、640px以上の画面でのみテキストを中央に表示し、小さな画面では表示しません。 -->
<div class="sm:text-center"></div>

✅ 接頭辞なしのユーティリティを使ってモバイルをターゲットにし、大きなブレークポイントではオーバーライドする。

<!-- これにより、モバイルではテキストが中央に配置され、640px以上の画面では左寄せになります。 -->
<div class="text-center sm:text-left"></div>

そのため、まずモバイル用のレイアウトを実装し、その後、smスクリーン用の変更、mdスクリーン用の変更などを重ねていくのがよいでしょう。

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

Tailwind のブレイクポイントはmin-widthのみでmax-widthは含まれていませんので、小さいブレイクポイントで追加したユーティリティは大きいブレイクポイントでも適用されます。

あるブレイクポイントだけにユーティリティーを適用したい場合は、それを打ち消す別のユーティリティーを追加することで、より大きなサイズでそのユーティリティーを元に戻すという解決方法があります。

ここでは、mdブレークポイントでは背景色が赤、その他のブレークポイントでは緑になっている例を示します。

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500">
  <!-- ... -->
</div>

smブレークポイントやxlブレークポイントには背景色を指定する必要がないことに注意してください。ユーティリティーが効果を発揮し始めるタイミングを指定するだけで、停止するタイミングは指定しません。

---

ブレークポイントのカスタマイズ
ブレークポイントは、tailwind.config.jsファイルで完全にカスタマイズできます。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

詳しくは、ブレークポイントのカスタマイズをご覧ください。