Tailwindを用いたレスポンシブ設定
Tailwindとは
公式ドキュメント
Tailwindの使い方などは、こちらの記事を参考にしてみてください。
https://qiita.com/zzzzz/items/68461080515ec1012980
レスポンシブとは
レスポンシブデザインとは
簡単に説明すると
PC版、タブレット版やスマートフォン版などのページレイアウトを複数のページに分割することなく、一つのページにまとめて描く方法です。
Tailwind内に置けるレスポンシブ幅
sm: min-width:640px;
md: min-width:768px;
lg: min-width:1024px;
xl: min-width:1280px;
と設定されています。
ちなみに、768pxはiPad/mini/airと同じ画面幅です。また、1024pxはiPad Pro 12.9と同じ画面幅となります。（iPad/mini/airの横向きと同じ）
そして1280pxは Android Tablet Fire HD 10 10インチと同じ画面幅になります。
とこのように、Tailwindはこれらの機器を想定したレスポンシブ設定となっていることがわかります。
レスポンシブの使用方法
tailwindの使用方法はclass名に対応する名前を設定していく方法です。
例えば、<h1>の文字サイズを変更したいときにはh1 {font-size: 16px;}と指定することで実装できます。tailwindを用いると、
<h1 class="text-base">
と言うように書くことができます。
ここで、レスポンシブの記述を追加します。
<h1 class="md:text-base">
先ほどの記述との違いはmd:が付いたことです。
ちなみに、これは画面幅が768px以上のときにはこのtailwindのCSSが働くという意味になります。（以下のときに記述されると言う記述はできないので注意）
【余談】containerについて
tailwindのクラスにcontainerをつけると以下のCSSが働きます。参考
こちらは先ほどのレスポンシブと対応していることがわかります。
このcontainerはページの大枠につける場合が多いです。
例えば、
このページのように左右の余白をつけたいときにはこのcontainerのクラスを追加します。
そして、おそらくこのページのヘッダーに揃っているので、この大枠のエレメントにcontainerクラスを設定しているものと考えられます。
このように、ページ全体の余白を設定するときにこのクラスを指定することができます。