Adding Visual Flair & Decoration
Put borders around things (or just on one side).
Skill ID: VisualFlair_30
Description: Add a line around an element, or just on its top, bottom, left, or right edge.
Where to apply: Around input fields, images, separating sections, table cells.
Key Tailwind Classes:
border
,
border-t-2
,
border-red-500
Gotcha:
By default, borders add to the element's total dimensions (
box-sizing: content-box
). Tailwind sets
box-sizing: border-box
globally, meaning borders (and padding) are *within* the element's defined width/height, which is usually what you want. Beginners from other CSS contexts might be used to the former.