Tailwind CSSとレスポンシブデザイン

Tailwind CSSは、デフォルトでレスポンシブデザインを利用しています。これは、モバイルファーストのブレークポイントシステムを使用して実現されています。このシステムは、あらかじめ定義されたCSSクラスのセットを使用して、異なるビューポートサイズで異なるスタイルを適用することで機能します。これらのクラスは、スタイルシート内のscreenディレクティブと組み合わせて使用されます。

Tailwindのデフォルトのブレークポイントは次のとおりです。

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

これらをクラスの接頭辞として追加することで、これらのブレークポイントでスタイルを適用できます。例えば次のようになります。

<div class="text-sm md:text-lg lg:text-xl">Responsive Text</div>

この例では、テキストのサイズはデフォルトでsmになり、mdのブレークポイント（768px）でlgに変更され、その後lgのブレークポイント（1024px）でxlに変更されます。

もしブレークポイントをカスタマイズしたい場合は、tailwind.config.jsファイルを変更することで行うことができます。

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
  variants: {},
  plugins: [],
}

この例では、ブレークポイントにカスタムの名前（tablet, laptop, desktop）を定義しています。そして、これらをデフォルトのブレークポイントと同様にHTML内で使用することができます。

<div class="text-sm tablet:text-md laptop:text-lg desktop:text-xl">Responsive Text</div>

参考

https://tailwindcss.com/docs/responsive-design