Web制作

  1. ブログトップ
  2. Web制作
  3. TailwindCSSを使ったレスポンシブデザイン

Web制作

TailwindCSSを使ったレスポンシブデザイン

仲川 舞

TailwindCSSを使ったレスポンシブデザイン

TailwindCSSは、レスポンシブデザインを実現するのが非常に簡単です。スマートフォン、タブレット、デスクトップといったさまざまなデバイスに対応するためのユーティリティクラスが揃っているので、複雑なメディアクエリを書くことなく、直感的にレイアウトを調整できます。今回は、簡単なサンプルコードを交えて、レスポンシブ対応のポイントを解説します。

TailwindCSSのブレークポイント

まず、TailwindCSSで使える基本のブレークポイントは下記のようになっています。デフォルトでブレークポイントが設定されています。以下のようなプレフィックスを使って、レスポンシブのクラスを適用します。

  • sm:（640px以上）
  • md:（768px以上）
  • lg:（1024px以上）
  • xl:（1280px以上）
  • 2xl:（1536px以上）

ユーティリティクラスにブレークポイントのプレフィックスを追加することで、各デバイスサイズに応じたスタイリングが可能です。

実際にレスポンシブ対応してみる

下記は、デバイスサイズに応じてコンテンツのカラム数が変わる簡単な例です。

<div class="mt-5 mx-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-blue-300 p-4">
    <h2 class="font-bold">Item 1</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="bg-blue-300 p-4">
    <h2 class="font-bold">Item 2</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="bg-blue-300 p-4">
    <h2 class="font-bold">Item 3</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="bg-blue-300 p-4">
    <h2 class="font-bold">Item 4</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

スマホ時　grid-cols-1

grid-cols-1の画像

sm:grid-cols-2

sm:grid-cols-2の画像

md:grid-cols-3

md:grid-cols-3の画像

lg:grid-cols-4

lg:grid-cols-4の画像

TailwindCSSのブレークポイントをカスタマイズ

ブレークポイントをカスタマイズしたい時は、tailwind.config.jsに記述します。※カスタマイズ後は、TailwindCSSを再ビルドして新しいブレークポイント設定を適用する必要があります。

tailwind.config.jsファイルの、theme.extend.screensセクションにカスタムのブレークポイントを設定します。デフォルトのブレークポイントを変更したり、独自のブレークポイントを追加することが可能です。

デフォルトのブレークポイントを変更

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'sm': '500px',  // デフォルトの640pxを500pxに変更
        'md': '800px',  // デフォルトの768pxを800pxに変更
        'lg': '1100px', // デフォルトの1024pxを1100pxに変更
        'xl': '1400px', // デフォルトの1280pxを1400pxに変更
        '2xl': '1600px' // デフォルトの1536pxを1600pxに変更
      }
    }
  }
}

設定したブレークポイントは下記のように、ユーテリティクラスのプレフィックスに追加して使用します。

<h1 class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
    TailwindCSSで簡単レスポンシブ
</h1>

独自のブレークポイントを追加

tailwind.config.jsでtabletとdesktopのカスタムブレークポイントを有効にするためには、以下のコードを記述します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'tablet': '640px',    // 新しいカスタムブレークポイント
        'desktop': '1280px',   // 新しいカスタムブレークポイント
      },
    },
  },
  variants: {},
  plugins: [],
};
<h1 class="text-base tablet:text-lg desktop:text-xl">
  カスタムブレークポイントでのテキストサイズ変更
</h1>

終わりに

以上、TailwindCSSを使ったレスポンシブデザインをご紹介しました。TailwindCSSの場合、簡単にデバイスごとのスタイルを変更することが可能です。ぜひ、使ってみてください。

spoool blog

TOP