レスポンシブデザイン
sm, md, lg などはブレークポイントと呼ばれるもので、画面サイズに応じてスタイルを変更するための指定方法です。Tailwind CSS を使う際には、このブレークポイントを使ってレスポンシブデザインを実装することができます。
レスポンシブデザインとは？画面サイズに応じてデザインを変更すること。スマートフォン、タブレット、PC などの画面サイズに合わせて最適な表示を行うことができます。
まずそれぞれの意味ですが、英単語の省略形になります。
- Small(sm)
- Medium(md)
- Large(lg)
- Extra large(xl)
- Extra extra large(2xl)
Tailwind CSS 以外のデザインシステムでは、Extra small(xs)や Extra extra large(xxl)などのサイズも存在しますが、Tailwind CSS ではこの 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) |
| 2xl | 1536px 以上 | @media (min-width: 1536px) |
Tailwind CSSのドキュメントを参照し日本語化
レスポンシブデザイン例 コード
| デバイス | ブレークポイント | 画面幅 | 一般的な用途 |
|---|---|---|---|
| スマホ | default | 0px〜639px | モバイルファースト設計の基本レイアウト |
| 大画面スマートフォン | sm | 640px〜767px | 大型スマートフォン向けレイアウト調整 |
| タブレット | md | 768px〜1023px | タブレット向け 2 カラムレイアウト |
| ノート PC・デスクトップ | lg | 1024px〜1279px | PC 向けマルチカラムレイアウト |
| 大画面デスクトップ | xl | 1280px〜1535px | ワイド画面むけ最適化レイアウト |
| 4K ディスプレイ | 2xl | 1536px 以上 | 4K・超高解像度ディスプレイ向けレイアウト |
つまり、スマホサイズの時にフォントサイズを変更したい場合は、sm:をつけて指定します。
<!-- 基本はスマホサイズ用のtext-sm、画面が大きくなったらtext-baseやtext-lgに -->
<p class="text-sm sm:text-base md:text-lg">テキストコンテンツ</p>一般的な使用パターンとして、このような指定が行われます。
<!-- デフォルト：スマホ用に小さめ（14px） -->
<!-- sm(640px以上)：通常サイズ（16px） -->
<!-- lg(1024px以上)：大きめ（18px） -->
<h2 class="text-sm sm:text-base lg:text-lg">見出し</h2>任意の値を指定する
Tailwind CSS では、sm:, md:, lg:, xl:, 2xl: の他に、任意の値を指定することもできます。
<!-- 画面幅が 600px 以上の時に、フォントサイズを 20px に変更 -->
<p class="text-xl min-[600px]:text-2xl">テキストコンテンツ</p>