By default, standard CSS uses
box-sizing: content-box
, where an element's width/height
is its content area, and padding and borders are added *outside* of that. This can make layout tricky.
Tailwind CSS globally sets
box-sizing: border-box
for all elements. This means
that an element's specified width/height includes its padding and borders. This is usually much more intuitive.
Below, we have a container. Inside, two boxes each are set to
w-1/2
(50% width),
and also have padding and a thick border.
Parent Container (100% width)
With
box-sizing: border-box
(Tailwind's default),
this box is 50% of the parent's width. The padding (p-4) and border (border-4)
are *included* within that 50% width.
Similarly, this box is also 50% wide, and its padding and border fit *inside* that defined width. This prevents overflow.
If these boxes used
box-sizing: content-box
, their actual width would be:
50% (content) + padding + border
.
This would make each box wider than 50% of the parent, causing them to wrap or overflow,
breaking the two-column layout. Tailwind's global
box-sizing: border-box
prevents this common issue.