Теория — Урок 07 | Tailwind & shadcn

Рамка: толщина и цвет — разные классы

В Tailwind рамка разбита на составляющие. Класс border задаёт только толщину; без цвета браузер возьмёт currentColor, и рамка окажется цвета текста — обычно не то, чего вы хотели.

border без цвета

border + border-slate-200

<div class="flex flex-wrap gap-4">
  <div class="rounded-lg border p-4 text-sm text-rose-600">border без цвета</div>
  <div class="rounded-lg border border-slate-200 p-4 text-sm text-rose-600">border + border-slate-200</div>
</div>

Толщина: border (1px), border-2, border-4, border-8. Стороны: border-t, border-b, border-x, border-y, логические border-s и border-e. Стиль: border-solid (по умолчанию), border-dashed, border-dotted.

divide: линии между детьми

Когда нужно разделить элементы списка, не нужно вешать рамку на каждый и отменять её у последнего. Класс divide-y у родителя ставит границу между соседями:

Первая строка
Вторая строка
Третья строка

<ul class="max-w-sm divide-y divide-slate-200 rounded-lg border border-slate-200">
  <li class="px-4 py-2 text-sm text-slate-700">Первая строка</li>
  <li class="px-4 py-2 text-sm text-slate-700">Вторая строка</li>
  <li class="px-4 py-2 text-sm text-slate-700">Третья строка</li>
</ul>

Рамка, тень и кольцо решают одну задачу разными средствами — «отделить». Рамка похожа на контур на чертеже: строгая, занимает место. Тень — на свет от лампы: показывает, что предмет лежит выше. Кольцо — на подсветку выделенного объекта: временно, поверх всего, ничего не сдвигает.

Скругления

Шкала радиусов: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-4xl и крайние значения rounded-none и rounded-full.

none

2xl

full

<div class="flex flex-wrap items-end gap-3 text-center text-xs text-slate-600">
  <div><div class="size-14 rounded-none bg-slate-300"></div>none</div>
  <div><div class="size-14 rounded-sm bg-slate-300"></div>sm</div>
  <div><div class="size-14 rounded-lg bg-slate-300"></div>lg</div>
  <div><div class="size-14 rounded-2xl bg-slate-300"></div>2xl</div>
  <div><div class="size-14 rounded-full bg-slate-300"></div>full</div>
</div>

Скругление можно задать по сторонам и углам: rounded-t-lg, rounded-bl-xl. Правило вкуса: у вложенного элемента радиус должен быть меньше, чем у родителя, иначе углы выглядят неаккуратно.

Тени: шкала «высоты»

Тень в интерфейсе — это метафора расстояния до поверхности. Чем выше элемент «парит», тем он важнее и тем крупнее тень.

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

<div class="flex flex-wrap gap-4">
  <div class="rounded-lg bg-white p-4 text-xs text-slate-600 shadow-xs">shadow-xs</div>
  <div class="rounded-lg bg-white p-4 text-xs text-slate-600 shadow-sm">shadow-sm</div>
  <div class="rounded-lg bg-white p-4 text-xs text-slate-600 shadow-md">shadow-md</div>
  <div class="rounded-lg bg-white p-4 text-xs text-slate-600 shadow-lg">shadow-lg</div>
  <div class="rounded-lg bg-white p-4 text-xs text-slate-600 shadow-xl">shadow-xl</div>
</div>

Тень	Смысл	Пример
`shadow-xs`, `shadow-sm`	лежит на поверхности	карточка в списке
`shadow-md`	слегка приподнят	карточка при наведении
`shadow-lg`, `shadow-xl`	всплывающий слой	меню, поповер
`shadow-2xl`	модальное окно	диалог поверх страницы
`shadow-none`	плоско	внутри уже приподнятого блока

Есть и специальные: inset-shadow-sm — внутренняя тень (эффект «вдавленности»), text-shadow-sm — тень текста поверх картинки.

ring и outline: чем отличаются

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

	`ring`	`outline`
Как реализовано	через `box-shadow`	настоящий `outline`
Влияет на раскладку	нет	нет
Повторяет скругление	да	да
Совместимость с тенью	делит `box-shadow` с `shadow-*`	независим
Рекомендация	подсветка, выделение	состояние фокуса

<div class="flex flex-wrap gap-4">
  <button class="rounded-md bg-white px-4 py-2 text-sm text-slate-700 ring-2 ring-sky-500">ring-2 ring-sky-500</button>
  <button class="rounded-md bg-white px-4 py-2 text-sm text-slate-700 outline-2 outline-offset-2 outline-sky-500">outline-2 outline-offset-2</button>
</div>

Никогда не убирайте фокус совсем. outline-none без замены делает интерфейс непроходимым с клавиатуры. Если стандартный контур не нравится — замените его своим:

focus-visible:outline-2
        focus-visible:outline-offset-2 focus-visible:outline-sky-600

Из чего собирается карточка

Соберём всё вместе. Обратите внимание: рамка или тень — обычно достаточно чего-то одного, вместе они спорят.

На рамке

Строгий, «плоский» стиль. Хорош для плотных интерфейсов.

На тени

Мягкий, «объёмный» стиль. Хорош для витрин и лендингов.

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-5">
    <h3 class="text-sm font-semibold text-slate-900">На рамке</h3>
    <p class="mt-1 text-sm text-slate-600">Строгий, «плоский» стиль. Хорош для плотных интерфейсов.</p>
  </div>
  <div class="rounded-xl bg-white p-5 shadow-md">
    <h3 class="text-sm font-semibold text-slate-900">На тени</h3>
    <p class="mt-1 text-sm text-slate-600">Мягкий, «объёмный» стиль. Хорош для витрин и лендингов.</p>
  </div>
</div>

Урок 07. Теория: чем отделять элементы

⚡ Кратко