Borders

In this lesson, we'll turn a plain white box into a modern card: with a border, rounded corners, a shadow and a picture that fits in nicely. We'll work on the adoption card of Oscar, a young black cat. The card already has the classes you know from the previous lessons: colors, text sizes, padding and margins, a maximum width, and the class mx-auto, which centers the card.

In the CSS course, you wrote a border with three values: border: 1px solid gray, that is, a width, a style and a color. In Tailwind, each of them has its own classes, and most of the time you need just one: border.

Careful: here, the number is the width in pixels, not a step of the spacing scale. border-2 is 2 pixels, while p-2 is 8.

Why is a width enough? In the CSS course, a border without a style didn't show at all. But Preflight, Tailwind's base styles, gives every element border: 0 solid in advance: a solid line that is 0 pixels wide. As soon as a class gives it a width, the line appears. For other styles, there are the classes border-dashed, border-dotted and border-double.

And the color? Preflight doesn't set one, so a border gets the default color currentColor: the element's text color. That's handy for a button whose border should match its text, but a card with dark text gets a dark frame. Another color comes from the palette you know: border-stone-200 sets border-color to a light shade of stone, just as bg-stone-200 sets the background.