はじめに：暗号のように見えた hidden md:flex
Next.js ブログにスマートフォン用のハンバーガーメニューを実装していたときのことです。
「PC では横並びのナビゲーションを表示し、スマホでは三本線のアイコンを表示する」という、Web サイトではごく当たり前の切り替えを行おうとしました。
その際、 Tailwind CSS を使って以下のようなコードを書きました。
tsx{/* PC用ナビゲーション */} <div className="hidden md:flex items-center space-x-6 h-10 ..."> {/* スマホ用：ハンバーガーアイコン */} <button className="md:hidden p-2" ...>
正直に言うと、最初にこの hidden md:flex や md:hidden という書き方を見たとき、「何をやっているのか」が直感的には全く分かりませんでした。まるで暗号のようだと感じたのを覚えています。
しかし、この仕組みを紐解いていくうちに、以前から言葉だけは知っていた「モバイルファースト」という概念が、私の中で初めて具体的な意味を持って結びつきました。
Tailwind CSS は「スマホの表示」が基準
私が混乱していた最大の理由は、「PC 用の表示を作ってから、それをスマホ用に縮める」という、無意識の思い込みがあったからです。
調べてみると、 Tailwind CSS の設計思想は完全にその逆でした。 プレフィックス（ md: などの接頭辞）が何もついていないクラスは、「一番小さい画面（スマートフォン）」を基準として適用されるのです。
そして md: というのは、「画面の幅が Medium（デフォルトでは 768px）以上になったときだけ、このスタイルで上書きする」という指示でした。
2つの書き方の意味が紐解ける
この「スマホが基準で、広くなったら上書き」というルール（これがまさにモバイルファーストの実装です）を理解した上で、先ほどの暗号のようなコードを読み解くと、一気に意味が分かりました。
hidden md:flex （PC 用ナビゲーション）
hidden（基準）： スマホの画面では、とりあえず「非表示」にして隠しておく。md:flex（上書き）： 画面が 768px 以上（PCやタブレット）に広がったら、非表示をやめて「横並び（flex）」で表示する。
md:hidden （スマホ用アイコン）
- プレフィックスなし（基準）： スマホの画面では、そのまま「表示」しておく。
md:hidden（上書き）： 画面が 768px 以上に広がったら、「非表示（hidden）」にして隠す。
おわりに：1つのファイルで完結するスマートさ
以前の私は、漠然と「PC 用のヘッダーファイル」と「スマホ用のヘッダーファイル」を2つ作って、システム側でどちらかを出し分けるような大掛かりなものが必要だと思っていました。
しかし実際は、同じ <header> の中に2つの要素を並べて書き、上記のようなクラスを指定しておくだけでした。あとは画面の幅に応じて、CSS の力だけで自動的に表示と非表示がパタパタと切り替わってくれるのです。
「モバイルファースト」というのは、単なるデザインの心構えではなく、「まずはスマホ用を書き、必要に応じて広い画面用の条件を足していく」 という、極めて合理的で無駄のないコードの書き方そのものだったのだと、深く腑に落ちた実装作業でした。
メインブログでは、実装の手順を詳しく解説しています。
