Tailwind CSS Box sizing

Basic example

If you want the browser to include the element’s borders and padding when you give it a height or width, use the .box-border class which set the element’s box-sizing to border-box.

If you want the browser to add borders and padding on top of the element’s specified width or height, use the .box-content class which set the element’s box-sizing to content-box.

The difference is the element with .box-border class, a 2px border and 6px of padding on all sides it will be rendered as 100px × 100px, with an internal content area of ​​84px × 84px, and the element with .box-content class, a 2px border and 6px of padding on all sides will be rendered as 116px × 116px, with an internal content area of ​​100px × 100px.

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

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