Tailwind CSSでブレイクポイントをカスタマイズする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はTailwind CSSでレスポンシブデザイン用のブレイクポイントをカスタマイズする方法をご紹介したいと思います。

はじめに
- 従来のCSS
- Tailwind CSSのユーティリティクラスを用いたレスポンシブデザインの実装
カスタマイズ方法
- max-widthで定義したい場合
さいごに

はじめに

Tailwind CSSではブレイクポイント用のユーティリティクラスが用意されており、メディアクエリを書くことなくレスポンシブデザインを実装することができます。

従来のCSS

.container {
  display: flex;

  @media (min-width: 640px) { 
    display: block;
  }
}

Tailwind CSSのユーティリティクラスを用いたレスポンシブデザインの実装

<div class="flex sm:block">...</div>

ユーティリティクラスの前にsm: やlg:をつけることでブレイクポイント用にスタイリングできます。

カスタマイズ方法

ブレイクポイントはTailwind CSSによって予め用意されていますが、独自に定義することもできます。

カスタマイズしたい場合は、tailwind.config.jsのtheme設定のscreenセクションに記述をします。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      // @media (min-width: 480px) { ... }を "mobile"として定義
      'mobile': '480px',
    },
  }
}

その際、プレフィックスは自由に設定することができます。

`max-width`で定義したい場合

デフォルトの記述方法ですと、設定した値はmin-widthとして認識されます。

max-widthとして定義したい場合は以下のように記述することで設定することができます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      // @media (max-width: 480px) { ... }を "mobile"として定義
      'mobile': { max: '480px' },
    },
  }
}