TailwindCSSで要素をモバイルで非表示、デスクトップで表示する方法
問題
TailwindCSSを使用する際、モバイル端末では要素を非表示にし、デスクトップサイズ（lgブレークポイント以上）でのみ要素を表示したい場合があります。
標準的なTailwindCSSのブレークポイントはmin-widthベースであるため、sm:hiddenのようなクラスを使用すると、768px以上のすべての画面サイズで要素が非表示になってしまいます。
解決策
推奨方法: max-{breakpoint} クラスの使用
TailwindCSSではmax-{breakpoint}:{class}構文を使用して、特定のブレークポイント以下でのみスタイルを適用できます。
html
<!-- smサイズ（640px）未満で非表示 -->
<div class="max-sm:hidden">Hello</div>
<!-- mdサイズ（768px）未満で非表示 -->
<div class="max-md:hidden">Hello</div>この方法はTailwindCSS v3.0以降でサポートされており、最も直感的な解決策です。
TailwindCSSのブレークポイント
sm: 640px以上md: 768px以上lg: 1024px以上xl: 1280px以上2xl: 1536px以上
従来の方法: hidden と {breakpoint}:block の組み合わせ
max-{breakpoint}クラスが利用できない環境や、従来のアプローチを使用したい場合は以下の方法も有効です。
html
<div class="flex">
<div class="hidden lg:block">01</div>
<div>02</div>
<div>03</div>
</div>このコードでは：
- デフォルトで
hiddenクラスにより要素を非表示 lg:blockクラスで1024px以上の画面サイズで表示
その他のオプション
可視性クラスの使用
visibilityプロパティを使用する方法もありますが、表示/非表示の制御には推奨されません。
html
<div class="invisible lg:visible">01</div>WARNING
visibility: hiddenは要素を非表示にしますが、スペースは確保されたままになります。完全に要素を削除したい場合はdisplay: noneを使用するhiddenクラスが適しています。
レスポンシブFlexクラスの使用
Flexコンテナ内の要素を制御する場合：
html
<div class="flex">
<div class="hidden md:flex">01</div>
<div>02</div>
<div>03</div>
</div>実装例
以下に完全なHTMLの例を示します：
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailwindCSS レスポンシブ表示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex p-4 bg-gray-100">
<!-- モバイルで非表示、デスクトップで表示 -->
<div class="max-sm:hidden bg-blue-200 p-4 rounded">
この要素は640px以上の画面でのみ表示されます
</div>
<div class="bg-green-200 p-4 rounded ml-2">
常に表示される要素
</div>
<div class="bg-yellow-200 p-4 rounded ml-2">
常に表示される要素
</div>
</div>
</body>
</html>html
<div class="max-md:hidden">
この要素は768px未満の画面で非表示になります
</div>html
<div class="hidden md:block">
この要素は768px以上の画面でのみ表示されます
</div>注意点
- TailwindCSSのバージョン確認:
max-{breakpoint}クラスはTailwindCSS v3.0以降で利用可能です - パフォーマンス: 多数の要素を非表示にする場合は、レンダリングパフォーマンスに注意してください
- アクセシビリティ: 非表示にする要素が重要なコンテンツでないことを確認してください
まとめ
TailwindCSSで要素を特定の画面サイズでのみ表示するには：
- 最新の方法:
max-sm:hidden,max-md:hiddenなどmax-{breakpoint}クラスを使用 - 従来の方法:
hiddenと{breakpoint}:blockを組み合わせて使用
どちらの方法も有効ですが、コードの可読性とメンテナンス性を考慮するとmax-{breakpoint}クラスを使用することをお勧めします。