Скруглённые углы

Скруглённые углы делаются свойством border-radius, как вы знаете из курса CSS. В Tailwind для этого есть классы rounded-*:

Названия размеров вам знакомы по размерам шрифта и максимальной ширине: от очень малого (xs) через средний (md) до очень большого (xl, 2xl, 3xl). Будьте осторожны со старыми примерами из интернета, написанными для Tailwind 3: с тех пор некоторые названия сдвинулись. Там rounded-sm был всего 2 пикселя, как сегодняшний rounded-xs.

rounded-full — особый случай: радиус настолько велик, что более короткие стороны элемента превращаются в полукруги. Кнопка становится «таблеткой», а квадрат, например картинка с size-16, — кругом. В курсе CSS вы делали круг через border-radius: 50%, но на прямоугольнике 50% даёт эллипс, а не «таблетку»:

rounded-full border-radius: 50%

Можно скруглить и только некоторые углы: rounded-t-2xl скругляет два верхних (t — сверху, как у рамок), rounded-l-lg — два левых, а rounded-tl-lg — только верхний левый.