Рамки, скругления и тени

Рамки, скругления и тени отделяют карточку от фона и делают кнопки похожими на кнопки. В Tailwind для каждого из этих свойств есть короткая шкала значений.

Рамка

border включает рамку толщиной 1 пиксель, border-2, border-4 — толще. Стороны выбираются так же, как у отступов: border-t, border-b-2. Цвет задаёт отдельный класс:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="border border-gray-300 p-3">Серая рамка вокруг</p>
<p class="mt-3 border-l-4 border-indigo-500 p-3">Акцентная полоса слева</p>

Первый абзац обведён светло-серой линией, у второго — толстая синяя полоса слева, как у цитаты.

Разделители

divide-y проводит линию между соседними элементами списка — не нужно убирать рамку у последнего:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<ul class="w-64 divide-y divide-gray-200 border border-gray-200">
  <li class="p-3">Наушники — $79</li>
  <li class="p-3">Колонка — $45</li>
  <li class="p-3">Зарядка — $19</li>
</ul>

Скругление

Скруглить только часть углов можно так: rounded-t-xl — верхние, rounded-l-lg — левые.

Тени

Тени задают классы от shadow-2xs до shadow-2xl, а shadow-none убирает тень. Соберём рамку карточки товара:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="max-w-xs overflow-hidden rounded-xl bg-white shadow-lg">
  <img src="/media/photo-400x250.jpg" alt="Наушники" class="h-40 w-full object-cover">
  <div class="p-4">
    <h2 class="font-semibold">Беспроводные наушники</h2>
    <p class="text-gray-600">$79</p>
  </div>
</div>

Карточка со скруглёнными углами и мягкой тенью. overflow-hidden обрезает углы картинки по скруглению рамки, иначе они торчали бы наружу.

Кольцо

ring- рисует контур через тень: он не меняет размер элемента и не сдвигает соседей. Его часто используют для выделения: ring-2 ring-indigo-500. Особенно полезно кольцо на фокусе — это урок про состояния.

Частая ошибка

Писать только border и ждать светло-серую линию:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="border p-3 text-gray-900">Рамка цвета текста</div>

В Tailwind 4 рамка без цвета берёт цвет текста — здесь она почти чёрная. В третьей версии по умолчанию был серый, поэтому старые примеры выглядят иначе. Всегда добавляйте цвет: border border-gray-200.