最大の幅

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

Class reference

Class
Properties
.max-w-nonemax-width: none;
.max-w-xsmax-width: 20rem;
.max-w-smmax-width: 24rem;
.max-w-mdmax-width: 28rem;
.max-w-lgmax-width: 32rem;
.max-w-xlmax-width: 36rem;
.max-w-2xlmax-width: 42rem;
.max-w-3xlmax-width: 48rem;
.max-w-4xlmax-width: 56rem;
.max-w-5xlmax-width: 64rem;
.max-w-6xlmax-width: 72rem;
.max-w-fullmax-width: 100%;
.max-w-screen-smmax-width: 640px;
.max-w-screen-mdmax-width: 768px;
.max-w-screen-lgmax-width: 1024px;
.max-w-screen-xlmax-width: 1280px;

使用方法

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

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

レスポンシブ

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

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

<div class="max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl ...">
  Target
</div>
Target

カスタマイズ

Max-Width Scale

tailwind.config.jsファイルの theme.maxWidthセクションでTailwindのデフォルトの最大幅スケールをカスタマイズします。

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

デフォルトテーマのカスタマイズについてはtheme customization documentationをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはmax-width utilitiesのために作られます。

あなたはどのバリアントがmax-width utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのmaxWidthプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     maxWidth: ['responsive'],
+     maxWidth: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしmax-width utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのmaxWidth propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!