【Tailwind和訳】SIZING/Min-Width

この記事について

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

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

Min-Width

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

クラス	プロパティー
min-w-0	min-width:0px;
min-w-full	min-width:100%;
min-w-min	min-width:min-content;
min-w-max	min-width:max-content;

使用法

min-w-oまたはmin-w-fullユーティリティを使用して、要素の最小幅を設定します。

<div class="w-24 min-w-full ...">min-w-full</div>

---

レスポンシブ

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

<div class="w-24 min-w-full md:min-w-0 ...">
  <!-- ... -->
</div>

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

---

カスタマイズ

Min-width スケール

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

tailwind.config.js

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

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

バリアント

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

tailwind.config.jsファイルのvariantsセクションでminWidthプロパティを変更することにより、min-width ユーティリティ用に生成されるバリアントを制御できます。

たとえば、この構成では、ホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

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

無効化

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

tailwind.config.js

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