box-sizing: border-box
Tailwind CSS globally sets
box-sizing: border-box;
. This means that an element's padding and borders are included *within* its specified width and height, rather than adding to them. This is generally more intuitive for layout.
Gotcha:
If you're coming from a context where the default CSS
box-sizing: content-box;
was used, you might expect borders to increase the element's total dimensions. With Tailwind, they don't.
w-32 h-32
(No Border)
Total on-screen size matches defined size.
w-32 h-32 border-8
(With Border)
Total on-screen size still matches defined
w-32 h-32
. Border is *inside*.
border-box
, so borders and padding do not increase the element's declared
width
or
height
.
border
class adds a 1px solid border using the default border color (
border-gray-200
by default, but configurable).
border-t-2
means "border top 2 pixels". You can specify color like
border-red-500
.