ボックスサイジング

Tailwind CSS version
v1.2.0+

ブラウザが要素の合計サイズを計算する方法を制御するためのユーティリティ

Class reference

Class
Properties
.box-borderbox-sizing: border-box;
.box-contentbox-sizing: content-box;

Include borders and padding

box-borderを使用して、要素の box-sizingborder-boxに設定し、高さまたは幅を指定するときに要素の境界線とパディングを含めるようにブラウザに指示します。

これは、2pxの境界線とすべての側面に4pxのパディングがある100px × 100pxの要素が、88px × 88pxの内部コンテンツ領域で100px × 100pxとしてレンダリングされることを意味します。

Tailwindは、これをpreflight base stylesのすべての要素のデフォルトにします。

<div class="box-border h-20 w-32 p-4 border-4 border-gray-400 bg-gray-200">
  <div class="h-full w-full bg-gray-400"></div>
</div>

Exclude borders and padding

box-contentを使用して、要素の box-sizingcontent-boxに設定し、要素の指定された幅または高さに境界線とパディングを追加するようにブラウザに指示します。

つまり、2pxの境界線と4pxのパディングをすべての側面に持つ100px × 100pxの要素は、実際には112px × 112pxとしてレンダリングされ、内部コンテンツ領域は100px × 100pxになります。

<div class="box-content h-20 w-32 p-4 border-4 border-gray-400 bg-gray-200">
  <div class="h-full w-full bg-gray-400"></div>
</div>

Responsive

特定のブレークポイントでボックスサイズを制御するには、既存のボックスサイズユーティリティに {screen}:プレフィックスを追加します。 たとえば、md:box-contentを使用して、中程度の画面サイズ以上でのみbox-contentユーティリティを適用します。

<div class="box-border md:box-content ...">
  <!-- ... -->
</div>

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

Customizing

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!