Итоги

В этом уроке мы превратили простую коробку Оскара в современную карточку и узнали, что:

• border даёт элементу рамку толщиной 1 пиксель, а border-2, border-4 и border-8 — более толстые (число в пикселях). Preflight задаёт каждому элементу border: 0 solid, поэтому достаточно указать толщину.
• По умолчанию у рамки цвет текста элемента (currentColor). Другой цвет берётся из палитры: border-stone-200.
• border-t, border-r, border-b, border-l, border-x и border-y рисуют рамку только с некоторых сторон, тоже с толщиной: border-l-4.
• Классы от rounded-xs до rounded-3xl скругляют углы, rounded-full делает «таблетку» или круг, а rounded-t-2xl и подобные скругляют только некоторые углы.
• Классы от shadow-xs до shadow-2xl добавляют тень (свойство CSS box-shadow).
• В Tailwind 4 некоторые названия изменились: rounded-xs и shadow-xs — это то, что в Tailwind 3 называлось rounded-sm и shadow-sm.
• Благодаря Preflight изображения — это блоки, которые никогда не шире родителя и сохраняют соотношение сторон.
• object-cover заполняет блок картинки без искажений и обрезает то, что выступает; object-contain вписывает картинку целиком.
• aspect-video, aspect-square и aspect-4/3 задают элементу соотношение сторон, так что высота следует за шириной.
• overflow-hidden обрезает содержимое и по скруглённым углам, поэтому картинка скругляется вместе с карточкой.
• opacity-60 и подобные делают бледным весь элемент со всем, что в нём, в отличие от цвета со слэшем, например bg-black/50.

В следующем уроке, посвящённом Flexbox, Grid и Position, вы расположите такие карточки рядом и сеткой и поместите значок в угол карточки.

Для практики вот карточка с контактами для сайта приюта. Придайте ей вид карточки.