- Published on
O Canada_Tailwind解説付
date: 2017-07-15 ➡ mod: 2023-10-17
The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.
Features images served using next/image component. The locally stored images are located in a folder with the following path: /static/images/canada/[filename].jpg
Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.
Gallery
Implementation
<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">
</div>
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
</div>
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
</div>
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
</div>
</div>
Tailwindの書き方メモ
特に何も接頭辞の無い記述はデフォルトcss
| クラス | 説明 |
|---|---|
m-{size} | 上下左右のマージン 例：m-2 は上下左右のマージンを2のサイズ |
p-{size} | 上下左右のパディング 例：p-4 は上下左右のパディングを4のサイズ |
w-{size} | 要素の幅 例：w-1/2 は要素の幅を親要素の半分 |
xl:{class} | xl 画面サイズ（大画面）でのみクラスを適用 例：xl:w-1/4 は xl 画面サイズで要素の幅を1/4に設定 |
lg:{class} | lg 画面サイズ（中画面）でのみクラスを適用 例：lg:hidden は lg 画面サイズで要素を非表示に |
md:{class} | md 画面サイズ（小画面）でのみクラスを適用 例：md:text-center は md 画面サイズでテキストを中央寄せに |
sm:{class} | sm 画面サイズ（超小画面）でのみクラスを適用 例：sm:flex は sm 画面サイズで要素をフレキシブルに |
cssメモ
flexflex-wrapoverflow-hidden: 要素をフレキシブルなコンテナ内に配置し、画面が狭い場合には要素を折り返す。overflow-hiddenは要素が親要素からはみ出したときに表示を制限するためのクラス
With MDX v2, one can interleave markdown in jsx as shown in the example code.
- "インターリーブ"（interleave）は、異なる種類のコードや要素を交互に配置することを意味する
- MDX（Markdown Extended）では、マークダウンとJavaScript/Reactコード（JSX）を同じファイル内で交互に配置することができ、より豊かなコンテンツを作成できる。
Photo Credits
Maple photo by Guillaume Jaillet on Unsplash
Lake photo by Tj Holowaychuk on Unsplash
Toronto photo by Matthew Henry on Unsplash