tailwindcss で Responsive なデザインをしたい。
解決策
tailwindcssでは、画面サイズに応じた Responsive 用のバリアントが用意されている。
これを使い、以下のように画面サイズ別にスタイルを定義する。
なお、Responsive 用のバリアントはモバイルファーストとなっており、バリアント未指定時(例: w-12)は、全画面サイズに適応され、
バリアント指定時は、指定バリアントのサイズ以上の全画面サイズに適用される。
<div class="w-12 md:w-24 xl:w-36">
<!-- 略 -->
</div>
Responsive 用のバリアント
| variant | Minimum width | 説明 |
|---|---|---|
| sm | 640px | 640px以上の画面にスタイルを適用する |
| md | 768px | 768px以上の画面にスタイルを適用する |
| lg | 1024px | 1024px以上の画面にスタイルを適用する |
| xl | 1280px | 1280px以上の画面時にスタイルを適用する |
| 2sl | 1536px | 1536px以上の画面にスタイルを適用する |