こんにちは。エキサイトでデザイナーをしている齋藤です。
今回はTailwind CSSでレスポンシブデザイン用のブレイクポイントをカスタマイズする方法をご紹介したいと思います。
はじめに
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' }, }, } }
さいごに
今回はTailwind CSSでレスポンシブデザイン用のブレイクポイントをカスタマイズする方法をご紹介しました。
プロジェクトに合わせて拡張できることがTailwind CSSの魅力ですね。
Tailwind CSSを使っている、これから使いたいという方の一助となれば幸いです。
ご精読ありがとうございました。