tailwindでレスポンシブデザインを作成する

モバイルファーストという考え方

TailwindCSSの公式ドキュメントに書かれているモバイルファーストというのは、「デフォルトでは一番小さい画面の設定です。大きい画面で表示した時の見え方を設定したい時は、sm:〜という表記で記述してね」という意味です。

言葉では少しわかりにくいかと思いますので、実際に画面を作ってみましょう。

  <div class=" flex flex-col sm:flex-row h-screen ">

    <aside class=" hidden sm:block w-[200px]  px-3 border-r-2">
      <div @click="$router.push('/index')">タイトルロゴ</div>

      <ul class="py-3">
        <li v-for="page of pages" class="w-full px-3 hover:bg-gray-100" @click="navigateTo(page.to)">
          <h2 >{{ page.title }}</h2>
        </li>
      </ul>
    </aside>

    <main class="flex-grow flex flex-col ">
      <NuxtPage/>
    </main>
    
    <footer class=" sm:hidden sticky bottom-0 bg-white py-2 border " >
      <ul class="flex justify-between">
        <li v-for="page of pages" class="w-full ">
          <component class=" w-6 mx-auto" :is="page.icon" @click="navigateTo(page.to)" ></component>
        </li>
      </ul>
    </footer>

  </div>

サイドバーはsm以上で表示

<aside class=" hidden sm:block w-[200px]  px-3 border-r-2">

hidden sm:blockの部分が、「デフォルトではhidden、画面サイズがsm以上だとblock」という意味です。
言い換えると、「スマホ画面のような一番小さい画面ではhidden（つまり隠れる）となって、PC画面ではblockスタイルとなる（つまり表示される）」設定にできます。

なお、cssで表示させない設定をするには、「invisible sm:visible」という書き方も考えられますが、この書き方だと空白になってしまいます。

画面下のメニューバーはスマホ画面のみで表示

一方で、フッターの部分

<footer class=" sm:hidden sticky bottom-0 bg-white py-2 border " >

こちらは、「デフォルトでは表示、画面サイズがsm以上だとhidden」です。
言い換えると、「スマホ画面のような一番小さい画面では表示され、PC画面ではhidden（つまり隠れる）」設定にできます。