Границы, скругления и тени

Добавляем элементам рамки, скруглённые углы и тени — то, что делает интерфейс опрятным.

Рамки

Толщину рамки задаёт border (1px) и варианты border-2, border-4. Можно задавать рамку только с одной стороны: border-t (сверху), border-b (снизу) и т.д. Цвет — отдельным классом border-*:

<div class="border-2 border-blue-500">Синяя рамка 2px</div>
<div class="border-b border-gray-200">Только нижняя линия</div>

Первый блок обведётся синей рамкой толщиной 2px, у второго будет лишь тонкая серая линия снизу — частый приём для разделителей в списках.

Скругление углов

rounded-* скругляет углы. Шкала от едва заметного к полному кругу:

rounded-full на квадратной картинке даёт круглый аватар:

<img class="w-12 h-12 rounded-full" src="avatar.jpg" alt="">

Квадрат 48×48 превратится в круглый аватар.

Тени

shadow-* добавляет тень — элемент «приподнимается» над фоном. Шкала по силе: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl.

<div class="bg-white rounded-lg shadow-md p-4">Карточка</div>

Белая карточка со скруглёнными углами будет отбрасывать мягкую тень — кажется, что она лежит чуть выше страницы. Это базовый рецепт любой карточки.

Кольцо — ring

ring добавляет «кольцо» вокруг элемента — по сути обводку, которая не влияет на размер блока (в отличие от рамки). Чаще всего его используют для подсветки активного поля ввода:

<input class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500">

В обычном состоянии — поле с рамкой; при фокусе (когда в него кликнули) вокруг появится синее кольцо 2px. Префикс focus: мы подробно разберём в разделе про состояния.

Итог

• border + border-* задают толщину и цвет рамки; можно по одной стороне (border-b).
• rounded-* скругляет углы вплоть до rounded-full (круг).
• shadow-* даёт тень-приподнятость; ring — обводка-кольцо, удобная для фокуса.