Tailwind CSSでのレスポンシブ対応の基本

Tailwind CSSは、モバイルファーストの設計思想に基づいており、簡単にレスポンシブデザインを実現できます。この記事では、Tailwind CSSにおけるレスポンシブ対応の基本について解説します。

モバイルファーストとは

モバイルファーストとは、スマートフォンなどの小さな画面サイズからスタイルを定義し、画面サイズが大きくなるにつれてスタイルを上書きしていく設計方法です。Tailwind CSSではこれがデフォルトで採用されています。

ブレークポイントの種類

Tailwind CSSでは、以下のようなブレークポイントが用意されています。

• sm: 640px以上
• md: 768px以上
• lg: 1024px以上
• xl: 1280px以上
• 2xl: 1536px以上

記述方法

ブレークポイントを使用するには、クラス名の前に sm: や md: などを付けて記述します。

1<div class="text-base sm:text-lg md:text-xl">
2  テキストサイズが画面サイズに応じて変化します。
3</div>
4

上記の例では、画面幅に応じてテキストサイズが段階的に大きくなります。

他のスタイルにも応用可能

レスポンシブの記述は、レイアウトや表示・非表示の切り替えなどにも使えます。

1<div class="hidden md:block">
2  768px以上の画面でのみ表示されます。
3</div>
4

1<div class="flex-col sm:flex-row">
2  小さい画面では縦並び、大きい画面では横並びにします。
3</div>
4

注意点

• モバイルファーストであることを意識し、まず基本のスタイルを定義してから上書きするようにしましょう。
• クラス名が長くなりがちなので、整理された命名や適切なコンポーネント化を心がけましょう。

まとめ

• Tailwind CSSはレスポンシブ対応が非常に簡単です。
• 画面サイズに応じたスタイルの変更は、sm: などのプレフィックスで行えます。
• モバイルファーストを意識して、拡張的にスタイルを記述しましょう。

Tailwind CSSを使えば、複雑なメディアクエリを書くことなく、効率的にレスポンシブデザインを実現できます。