Tailwind CSSで任意のメディアクエリを指定する

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

スポンサードリンク

«Tailwind CSSでdisabled | メイン