Box Sizing in TailwindCSS
? Box Sizing in Tailwind CSS
Box sizing controls how the total width and height of an element are calculated — whether padding and borders are included or not.
CSS Box-Sizing Basics
content-box(default): Width and height apply to content only. Padding and border add to size.border-box: Width and height include padding and border, making it easier to size elements predictably.
Tailwind Utilities for Box Sizing
Tailwind provides two utility classes:
| Class | CSS Equivalent | Description |
|---|---|---|
box-content | box-sizing: content-box; | Default CSS behavior |
box-border | box-sizing: border-box; | Includes padding and border in size |
Usage Example
<div class="w-64 p-4 border-4 box-content bg-blue-100"> Content-box (default) - width = content width only</div><div class="w-64 p-4 border-4 box-border bg-green-100 mt-4"> Border-box - width includes padding and border</div>The first box will be wider visually because padding and border are added outside the 64 width.
The second box will be exactly 64px wide including padding and border.
Why Use box-border?
Easier to control layout size without surprises.
Avoids unexpected element overflow.
Commonly recommended for layout containers and UI components.
Global Box Sizing Reset
Many projects apply a global box-sizing rule:
*, *::before, *::after { box-sizing: border-box;}In Tailwind, you can do this by adding this in your CSS or using a plugin/custom base styles.
Would you like a snippet to set global box-sizing in Tailwind?
