Рамка с одной стороны

В CSS вы рисовали линию только с одной стороны через border-top, border-bottom и подобные свойства. В Tailwind после border- добавляется буква стороны, а за ней — толщина, если линия должна быть не 1 пиксель:

Буквы сторон вам знакомы по внутренним отступам (pt-4, px-6): t — сверху (top), r — справа (right), b — снизу (bottom), l — слева (left), x — слева и справа, y — сверху и снизу.

Классу цвета сторона не нужна: border-orange-300 красит все четыре стороны, а видны только те, у которых есть толщина. (Если у сторон должны быть разные цвета, есть классы вроде border-t-orange-500.)

Линия с одной стороны часто что-то отделяет: border-b под заголовком, border-t над кнопками внизу карточки. Более толстая цветная линия слева отмечает цитату или важную заметку. Придадим такой вид описанию Оскара.