box-sizing

例

ボーダーとpaddingを含める

box-borderユーティリティを使用して、要素のbox-sizingをborder-boxに設定し、ブラウザに要素の高さや幅を指定する際に、ボーダーとpaddingを含めるように指示します。

これは、2pxのボーダーと全方向に4pxのpaddingを持つ100px × 100pxの要素が、内部コンテンツ領域88px × 88pxで100px × 100pxとしてレンダリングされることを意味します。

<div class="box-border size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

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

ボーダーとpaddingを除外する

box-contentユーティリティを使用して、要素のbox-sizingをcontent-boxに設定し、ブラウザに要素に指定された幅や高さに加えてボーダーとpaddingを追加するように指示します。

これは、2pxのボーダーと全方向に4pxのpaddingを持つ100px × 100pxの要素が、実際には内部コンテンツ領域100px × 100pxで112px × 112pxとしてレンダリングされることを意味します。

<div class="box-content size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

レスポンシブデザイン

プレフィックスa box-sizingユーティリティ md:のようなブレークポイントバリアントを使用して、ユーティリティを適用する範囲をmedium 以上の画面サイズ

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

バリアントの使用に関する詳細は、バリアントのドキュメントをご覧ください。