📦

【Tailwind和訳】LAYOUT/Box Sizing

2021/10/24に公開

この記事について

この記事は、LAYOUT/Box Sizingの記事を和訳したものです。

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

ブラウザが要素の合計サイズをどのように計算するかを制御するユーティリティです。

クラス	プロパティ
`box-border`	`box-sizing: border-box`
`box-content`	`box-sizing: content-box`

box-borderを使用すると、要素のbox-sizingをborder-boxに設定し、要素の高さや幅を指定したときに、その要素のボーダーとパディングを含めるようにブラウザに指示します。

これは、100px×100px の要素に 2px のボーダーと 4px のパディングを付けた場合、100px×100px として表示され、内部のコンテンツエリアは 88px×88px となります。

Tailwind では、プリフライトの基本スタイルで、すべての要素のデフォルトをこれにしています。

Image from Gyazo

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

box-contentを使用すると、要素のbox-sizingがcontent-boxに設定され、ブラウザは要素の指定された幅または高さの上にボーダーとパディングを追加するようになります。

つまり、100px×100px の要素に 2px のボーダーと 4px のパディングを施した場合、実際には 112px×112px で表示され、内部のコンテンツ領域は 100px×100px となります。

Image from Gyazo

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

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

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

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

デフォルトでは、レスポンシブ・バリアントのみがボックス・サイジング・ユーティリティー用に生成されます。

tailwind.config.jsファイルのvariantsセクションにあるboxSizingプロパティを変更することで、ボックスサイズ変更ユーティリティー用に生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

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

ボックスサイズ変更ユーティリティをプロジェクトで使用する予定がない場合は、設定ファイルのcorePluginsセクションでboxSizingプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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

ログインするとコメントできます