Рамки

В этом уроке мы превратим простую белую коробку в современную карточку: с рамкой, скруглёнными углами, тенью и аккуратно вписанной картинкой. Работать будем над карточкой Оскара — молодого чёрного кота, который ищет дом. В карточке уже есть классы из прошлых уроков: цвета, размеры текста, внутренние и внешние отступы, максимальная ширина и класс mx-auto, который центрирует карточку.

В курсе CSS вы записывали рамку тремя значениями: border: 1px solid gray — то есть толщиной, стилем и цветом. В Tailwind у каждого из них свои классы, но чаще всего нужен только один: border.

Осторожно: здесь число — это толщина в пикселях, а не шаг шкалы отступов. border-2 — это 2 пикселя, а p-2 — 8.

Почему хватает одной толщины? В курсе CSS рамка без стиля вообще не показывалась. Но Preflight, базовые стили Tailwind, заранее задаёт каждому элементу border: 0 solid: сплошную линию толщиной 0 пикселей. Как только класс задаёт толщину, линия появляется. Для других стилей есть классы border-dashed, border-dotted и border-double.

А цвет? Preflight его не задаёт, поэтому рамка получает цвет по умолчанию currentColor — цвет текста элемента. Это удобно для кнопки, у которой рамка должна совпадать с текстом, но карточка с тёмным текстом получит тёмную рамку. Другой цвет берётся из знакомой палитры: border-stone-200 задаёт border-color светлого оттенка stone, так же как bg-stone-200 задаёт фон.