TailwindCSSでレスポンシブなサイトを構築する件

フルスタックエンジニアのあかつきゆいとです。
今回はTailwindでレスポンシブデザインを構築する方法をつらつら書いていきたいと思います。

Tailwindはモバイルファースト

Tailwindの公式ドキュメントでは、モバイルファーストという理念が書かれています。
これは、最小の画面サイズのときのスタイルを書け、大きい画面のものはsmなどをつけて書き足せというものです。

例えば、これは私のサイトのプログラムを一部改変したものですが、

<main className="flex flex-col md:flex-row gap-8 row-start-2 items-center justify-center grow w-full mb-10 md:mb-0">
  <div className="flex flex-col gap-8 justify-center md:w-1/3 md:ml-20 w-3/4">
    // Description
  </div>
  <div className="flex flex-col justify-center items-center md:max-w-1/2 gap-5">
    // Image
  </div>
</main>

これで実際に何が行われているかを見てみましょう。

画面サイズのプレフィクス

mainのClassの中に、mdという単語が見えますか？
これは画面サイズを表しています。
他にも、

sm: min-width:640px;
md: min-width:768px;
lg: min-width:1024px;
xl: min-width:1280px;
2xl: min-width: 1536px;

このように定義されています。

例えば今回であれば、768px以上横幅があればflex-row、横並びにするということです。
他にも、md:max-w-1/2は、mdであればどれだけ大きくても50%という指示です。

このように画面サイズによって変えることができます。

参考文献