メープルリーフ、雪を頂いた山々、ターコイズブルーの湖、そしてトロントが織りなすカナダの美しい風景。このフォトギャラリーで景色を堪能し、MDX マジックと Tailwind クラスで簡単に再現できることをご覧ください。

next/image コンポーネントを使用して画像を配信しています。ローカルに保存された画像は以下のパスのフォルダーに配置されています：/static/images/canada/[filename].jpg

mdx を使用しているため、いくつかの Tailwind CSS クラスを使って、画像を表示するシンプルなレスポンシブ Flexbox グリッドを作成できます。

ギャラリー

実装

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>

MDX v2 では、サンプルコードに示すように、jsx 内にマークダウンを混在させることができます。

写真クレジット