📱
TailwindCSSのブレークポイントまとめ
TailwindCSSのブレークポイントとは
TailwindCSSでは、レスポンシブデザインを実装するためにブレークポイントが用意されています。
デフォルトで以下の5つのブレークポイントが提供されています。
ブレークポイント | 最小幅 |
---|---|
sm |
640px |
md |
768px |
lg |
1024px |
xl |
1280px |
2xl |
1536px |
基本的な使い方
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- コンテンツ -->
</div>
header例
<!-- ナビゲーションメニュー -->
<nav class="hidden md:flex"> <!-- モバイルでは非表示、md以上で表示 -->
<ul class="flex-col md:flex-row"> <!-- 縦並び→横並び -->
<li class="mb-4 md:mb-0 md:mr-6">Home</li>
<li class="mb-4 md:mb-0 md:mr-6">About</li>
<li class="mb-4 md:mb-0 md:mr-6">Contact</li>
</ul>
</nav>
<!-- ハンバーガーメニュー -->
<button class="md:hidden"> <!-- md以上で非表示 -->
<span class="block w-6 h-0.5 bg-gray-600"></span>
<span class="block w-6 h-0.5 bg-gray-600 mt-1"></span>
<span class="block w-6 h-0.5 bg-gray-600 mt-1"></span>
</button>
カスタムブレークポイントの設定
tailwind.config.js
でカスタムブレークポイントを追加することも可能です。
module.exports = {
theme: {
screens: {
'tablet': '640px',
'laptop': '1024px',
'desktop': '1280px',
},
},
}
max-ブレークポイント
TailwindCSSでは、max-
プレフィックスを使用することで、「指定した幅より小さい場合」の条件を設定できます。
ブレークポイント | 最大幅 |
---|---|
max-sm |
639px |
max-md |
767px |
max-lg |
1023px |
max-xl |
1279px |
max-2xl |
1535px |
使用例
<div class="max-md:bg-blue-500 md:bg-green-500">
<!-- 767px以下の場合は青背景、768px以上では緑背景 -->
</div>
<nav class="flex max-lg:hidden">
<!-- 1023px以下では非表示、1024px以上で表示 -->
</nav>
min-widthとmax-widthの使い分け
-
md:
(min-width): 「○○px以上の場合」 -
max-md:
(max-width): 「○○px以下の場合」
使い分けの例:
<div class="
bg-blue-500 /* デフォルト:青背景 */
md:bg-green-500 /* 768px以上:緑背景 */
max-sm:bg-red-500 /* 639px以下:赤背景 */
">
コンテンツ
</div>
実装時に気をつけるべきこと
- モバイルファーストで設計する
- 必要最小限のブレークポイントを使用する
- コンポーネント単位でレスポンシブ対応を考える
- 一貫性のあるブレークポイントを使用する
まとめ
TailwindCSSのブレークポイントを活用することで簡単にレスポンシブ対応することができます。
カスタムもできるので必要に応じて設定する。
Discussion