Box Sizing and Visibility in Tailwind CSS

1. Box Sizing Utilities

Tailwind includes two box sizing utilities:

• box-border – includes border and padding in element's total width and height
• box-content – excludes border and padding (default behavior)

<div class="w-64 p-4 border box-border">Box Border</div>
<div class="w-64 p-4 border box-content">Box Content</div>
            

Use box-border for predictable layout sizing, especially in card and form components.

2. Visibility Utilities

These utilities control whether an element is rendered or hidden:

• visible – the element is shown (default)
• invisible – hides the element but retains its space in the layout

<div class="visible">I’m visible!</div>
<div class="invisible">You won’t see me, but I take up space</div>
            

Use invisible for accessibility or conditional UI logic without breaking layouts.

3. Visibility vs Display

Unlike hidden (from the display utilities), invisible hides the element visually but preserves its layout space. This is useful for tooltips, dropdowns, or dynamic content toggling.