【Tailwind CSS】viewportを意識したデザイン実装

viewportとは？

ビューポート（viewport）は、Webページを閲覧する際にユーザーが実際に見ることができる画面の領域を指します。つまり、Webサイトが表示されるブラウザのウィンドウ部分や、スマートフォンやタブレットなどのデバイスのスクリーンの表示範囲を意味します。

tailwindでのviewportを意識したデザイン実装

Tailwind CSSで、ビューポートを意識したデザインを実装するには、sm（small）、md（medium）、lg（large）、xl（extra large）、2xl（2 extra large）といったプレフィックスをクラス名に追加することで、特定のビューポートサイズでのスタイル変更を指示できます。

例

<div class="text-base md:text-lg lg:text-xl">
  このテキストはビューポートサイズに応じてサイズが変わります。
</div>

この例では、基本のテキストサイズはtext-baseですが、ビューポートがmdサイズになるとtext-lgに、lgサイズになるとtext-xlに変更されます。

またTailwind CSSでは、デフォルトのブレークポイントをカスタマイズすることも可能です。tailwind.config.jsファイルを編集することで、プロジェクトの要件に合わせたブレークポイントを設定できます。

設定例

module.exports = {
  theme: {
    extend: {
      screens: {
        'tablet': '640px',
        'laptop': '1024px',
        'desktop': '1280px',
      }
    }
  }
}

この設定により、tablet、laptop、desktopという新しいブレークポイントが追加され、それぞれのビューポートサイズに応じたスタイル適用が可能になります。