Border on One Side

In CSS, you drew a line on one side only with border-top, border-bottom and the like. In Tailwind, you add the side's letter after border-, followed by the width if the line shouldn't be 1 pixel wide:

Class	CSS
`border-t`	`border-top-width: 1px;`
`border-r`	`border-right-width: 1px;`
`border-b-2`	`border-bottom-width: 2px;`
`border-l-4`	`border-left-width: 4px;`
`border-x`	`border-left-width: 1px;` `border-right-width: 1px;`
`border-y`	`border-top-width: 1px;` `border-bottom-width: 1px;`

You know the side letters from padding (pt-4, px-6): t is top, r right, b bottom, l left, x left and right, and y top and bottom.

The color class doesn't need a side: border-orange-300 colors all four sides, and only the ones that have a width are visible. (If two sides should have different colors, there are classes such as border-t-orange-500.)

A line on one side often separates things: border-b under a heading, border-t above the buttons at the bottom of a card. A thicker colored line on the left marks a quote or an important note. Let's give Oscar's description that look.

Instructions

Add the class border-l-4 to the paragraph with Oscar's description ("A brave explorer..."). A 4-pixel line appears along its left edge, and it's dark again: it has the paragraph's text color.

Add the class border-orange-300, which colors the line orange, and pl-3, so that the text doesn't touch the line.

Start programming for free

2/10