Tailwind CSSで任意のメディアクエリを指定する
Tailwind CSSでは簡単にメディアクエリの指定が可能です。
基本的な利用方法
基本的にはtailwind.config.jsのscreensに指定されているブレークポイントをもとにメディアクリの指定が可能です。
// tailwind.config.js
module.exports = {
theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px"
},
},
};
このように指定されていれば、以下のように各ブレークポイントに対する指定を行うことができます。
<div class="p-4 sm:p-5 lg:p-6 xl:p-10">
....
</div>
任意のブレークポイントを指定
細かいスタイルの調整を行う際にもscreensに追加すればscreensの値がどんどんと肥大化してしまいます。
任意のブレークポイントは min-[500px]:クラス という指定になります。
以下のサンプルではウィンドウ幅が500pxと900pxと1200px時にパディングがきりかわるように指定されています。
<div class="p-4 min-[500px]:p-5 min-[900px]:p-6 min-[1200px]:p-10">
....
</div>
参考: Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries, oh my! - Tailwind CSS