【Tailwind和訳】SIZING/Max-Width

この記事について

この記事は、tailwindcss/SIZING/Max-Widthの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Max-Width

要素の最大幅を設定するためのユーティリティ

クラス	プロパティ
max-w-0	max-width: 0rem;
max-w-none	max-width: none;
max-w-xs	max-width: 20rem;
max-w-sm	max-width: 24rem;
max-w-md	max-width: 28rem;
max-w-lg	max-width: 32rem;
max-w-xl	max-width: 36rem;
max-w-2xl	max-width: 42rem;
max-w-3xl	max-width: 48rem;
max-w-4xl	max-width: 56rem;
max-w-5xl	max-width: 64rem;
max-w-6xl	max-width: 72rem;
max-w-7xl	max-width: 80rem;
max-w-full	max-width: 100%;
max-w-min	max-width: min-content;
max-w-max	max-width: max-content;
max-w-prose	max-width: 65ch;
max-w-screen-sm	max-width: 640px;
max-w-screen-md	max-width: 768px;
max-w-screen-lg	max-width: 1024px;
max-w-screen-xl	max-width: 1280px;
max-w-screen-2xl	max-width: 1536px;

使用法

max-w-{size}ユーティリティを使用して、要素の最大幅を設定します。

<div class="max-w-md mx-auto ...">
  <!-- ... -->
</div>

読み取り幅

このmax-w-proseユーティリティは、読みやすさのために最適化された最大幅を要素に与え、フォントサイズに基づいて適応します。

<div class="text-sm max-w-prose ...">
  <p>
    Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe
    nam accusantium magni veniam qui enim mollitia excepturi sapiente.
  </p>
</div>

<div class="text-base max-w-prose ...">
  <p>
    Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe
    nam accusantium magni veniam qui enim mollitia excepturi sapiente.
  </p>
</div>

<div class="text-xl max-w-prose ...">
  <p>
    Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe
    nam accusantium magni veniam qui enim mollitia excepturi sapiente.
  </p>
</div>

ブレークポイントへの制約

max-w-screen-{breakpoint}クラスは、特定のブレークポイントに一致する最大幅を要素に与えるために使用できます。これらの値は、tailwind.config.js ファイルのtheme.screensセクションから自動的に取得されます。

<div class="max-w-screen-2xl">
  <!-- ... -->
</div>

---

レスポンシブ

特定のブレークポイントにおける要素の最大幅を制御するには、既存の max-width ユーティリティーに {screen}:というプレフィックスを追加します。

<div class="max-w-sm md:max-w-lg ...">
  <!-- ... -->
</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

---

カスタマイズ

Max-Width スケール

tailwind.config.jsファイルのtheme.maxWidthセクションで、max-w-*クラスの Tailwind のデフォルトの max-width スケールをカスタマイズします。

tailwind.config.js

  module.exports = {
    theme: {
      maxWidth: {
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
      }
    }
  }

max-wscreen-*クラスは、tailwind.config.jsファイルのtheme.screensセクションから派生します。

デフォルトのテーマのカスタマイズについて詳しくは、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、max-width ユーティリティに対してレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるmaxWidthプロパティを変更することで、どのバリアントが max-width ユーティリティー用に生成されるかをコントロールすることができます。

たとえば、この構成では、hover と focus のバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       maxWidth: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトで max-width ユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでmaxWidthプロパティをfalseに設定することで、ユーティリティを完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     maxWidth: false,
    }
  }