Box Sizing

Use to set an element’s box-sizing to border-box, telling the browser to include the element’s borders and padding when you give it a height or width.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px.

Tailwind makes this the default for all elements in our preflight base styles.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px.

To control the box-sizing at a specific breakpoint, add a {screen}: prefix to any existing box-sizing utility. For example, use md:box-content to apply the box-content utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the documentation.

You can control which variants are generated for the box-sizing utilities by modifying the boxSizing property in the section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the box-sizing utilities in your project, you can disable them entirely by setting the boxSizing property to false in the corePlugins section of your config file:

 Display→