Tailwind CSSを使ってレスポンシブ対応してみる

レスポンシブデザインとは？

レスポンシブデザインとは、画面サイズが異なるデバイス（スマホ、タブレット、PCなど）でも、見やすくデザインを調整する手法です。
画面サイズによって文字の大きさやレイアウトが変わるようにすることで、ユーザーに最適な見た目を提供できます。

Tailwind CSSのブレークポイント

TailwindCSSではデフォルトで「ブレークポイント」という基準が予め用意されています。

• sm（Small）：640px以上
• md（Medium）：768px以上
• lg（Large）：1024px以上
• xl（Extra Large）：1280px以上
• 2xl（それ以上）：1536px以上
  このようなブレークポイントを使って、デバイスの画面サイズに合わせたスタイルを簡単に指定できます。

tailwind.config.jsからデフォルトのブレークポイントの数値を変更することも出来るし、独自のブレークポイント追加することもできます

使い方

【テキスト編】
適用したいクラスの前にブレークポイントをつけるだけでok

<div class="text-base md:text-lg lg:text-xl">
　これはレスポンシブテキストです
</div>

• text-base : 通常時は文字サイズをbaseに設定
• md:text-lg : 画面幅が768px以上（md)の場合、文字サイズをlgに変更
• lg:text-xl : 画面幅が1024px以上（lg）の場合、文字サイズをxlに変更

【色編】

<button class="bg-blue-500 text-white rounded sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500">
　レスポンシブボタン
</button>

• bg-blue-500 : 通常時はボタンの色を青色
• sm:bg-green-500 :画面幅が640px以上（sm）ならボタンの色を緑に変更
• md:bg-yellow-500 : 画面幅が768px以上（md）ならボタンの色を黄色に変更
• lg:bg-red-500 : 画面幅が1024px以上（lg）ならボタンの色を赤色に変更

【レイアウト編】
gridクラスを使って簡単にレスポンシブなグリットレイアウトを作成する

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
　<div>アイテム1</div>
　<div>アイテム2</div>
　<div>アイテム3</div>
　<div>アイテム4</div>
</div>

• 通常時：1カラム
• sm : 2カラム
• md : 3カラム
• lg : 4カラム

【表示&非表示編】
特定の画面サイズでアイテムを表示 or 非表示で切り替える事もできます。

<div class="block sm:hidden">
　これは小さな画面で表示され、640px以上の画面では非表示になります
</div>
<div class="hidden sm:block">
　これは640px以上の画面で表示され、小さな画面では非表示になります
</div>

おわりに

基本的な使い方を紹介しましたが、レスポンシブデザインは奥が深く、まだまだ色んな実装パターンがあるようです。
公式ドキュメントの情報が豊富なので是非読んで見てください。
公式ドキュメント