🐎

TailwindCSSについて自分なりのチートシートを作る。#4 Container 編

に公開
Tailwind CSS
frontend
tech

初めに

TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。

第一弾目は、疑似クラスについてまとめました。
https://zenn.dev/daichi09167/articles/da920ca4edc0eb

第二弾目は、レスポンシブデザインについてまとめました。
https://zenn.dev/daichi09167/articles/805ea42f18d182

第三弾目は、ダークモードの実装についてまとめました。
https://zenn.dev/daichi09167/articles/39c483492431cc

本記事では、コンテナについてまとめていきたいと思います。

コンテナの特徴

  1. レスポンシブ対応

    • デフォルトでは幅100%
    • 画面幅に応じて最大幅が自動調整される
    • 固定的な画面サイズに対応したデザインに最適

  2. ブレークポイント対応
    以下のブレークポイントで最大幅が設定されます.

    • sm (640px以上): max-width 640px
    • md (768px以上): max-width 768px
    • lg (1024px以上): max-width 1024px
    • xl (1280px以上): max-width 1280px
    • 2xl (1536px以上): max-width 1536px

  3. ほかのフレームワークとの違い
    Tailwind CSS の container クラスは、.container に mx-auto を付けなければ中央寄せされません。また、内部パディングは自動的には含まれません（ただし、padding を加えたい場合は px-4 などを手動で指定します）。

使用例

<section class="bg-gray-100">
  <div class="container mx-auto px-4 py-20 text-center">
    <h1 class="text-4xl font-bold">プロダクトの魅力を、洗練されたUIで伝える</h1>
    <p class="mt-4 text-gray-600">このセクションはレイアウトやスタイル確認のための仮コンテンツです。</p>
  </div>
</section>

解説

  • mx-auto：「左右のマージンを自動」にして中央揃えする。
  • container：ブレークポイントごとに自動で max-width を設定してくれる。

Discussion