Tailwind CSSを使ってレスポンシブデザインを作成しているのに、画面サイズを変えてもデザインが変更されない！！
その原因は、ビューポートメタタグがないことでした！！
ビューポートメタタグとは？
ビューポートメタタグは、ブラウザに「どのように画面サイズを扱うべきか」を指示するものです。このタグがないと、ブラウザはデスクトップ向けのサイズを基準にしてしまい、スマホやタブレットでの表示が崩れることがあります。
必要なタグ
以下のコードをHTMLの<head>内に追加しましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これで、ブラウザがデバイスの画面幅に合わせてページを適切に表示するようになります。
このタグの役割
-
width=device-width
デバイスの画面幅をそのままビューポートの幅として使用します。これにより、ページが画面に収まり、横スクロールが発生しにくくなります。 -
initial-scale=1.0
ページの初期表示倍率を1倍（100%）に設定します。これにより、ズームされた状態ではなく、自然な大きさでコンテンツが表示されます。
実際のHTML例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザイン</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
このように設定することで、Tailwind CSSのレスポンシブクラスが正しく機能し、どんなデバイスでも快適な表示が可能になります。
まとめ
Tailwind CSSでレスポンシブデザインを作る際、ビューポートメタタグを追加するのを忘れないでください。これだけで、スマホやタブレットなどさまざまなデバイスでの表示が大幅に改善されます。シンプルな一手間で、デザインの品質がぐっと向上しますよ！