📏 Шкалы значений

Отступы, размеры текста, скругления, тени, брейкпоинты

Шкала отступов и размеров

Базовый шаг: --spacing: 0.25rem. Число в классе умножается на него. Работает в p-*, m-*, gap-*, w-*, h-*, size-*, inset-*.

Число	rem	px
`0`	0rem	0px
`0.5`	0.125rem	2px
`1`	0.25rem	4px
`1.5`	0.375rem	6px
`2`	0.5rem	8px
`2.5`	0.625rem	10px
`3`	0.75rem	12px
`3.5`	0.875rem	14px
`4`	1rem	16px
`5`	1.25rem	20px
`6`	1.5rem	24px
`7`	1.75rem	28px
`8`	2rem	32px
`9`	2.25rem	36px
`10`	2.5rem	40px
`11`	2.75rem	44px
`12`	3rem	48px
`14`	3.5rem	56px
`16`	4rem	64px
`20`	5rem	80px
`24`	6rem	96px
`28`	7rem	112px
`32`	8rem	128px
`40`	10rem	160px
`48`	12rem	192px
`56`	14rem	224px
`64`	16rem	256px
`72`	18rem	288px
`80`	20rem	320px
`96`	24rem	384px

Промежуточные значения задаются произвольно: p-[18px], w-[37%], mt-[calc(100%-1rem)].

Размеры текста

Класс	rem	px	Где применяют
`text-xs`	0.75	12	подписи, метки
`text-sm`	0.875	14	текст интерфейса
`text-base`	1	16	текст статьи
`text-lg`	1.125	18	лид-абзац
`text-xl`	1.25	20	подзаголовок
`text-2xl`	1.5	24	заголовок карточки
`text-3xl`	1.875	30	заголовок страницы
`text-4xl`	2.25	36	крупный заголовок
`text-5xl`	3	48	обложка
`text-6xl` … `text-9xl`	3.75 … 8	60 … 128	лендинги

Каждый класс приносит парный line-height. Изменить его отдельно: text-2xl/8 или leading-relaxed.

Скругления

Класс	Значение	Где применяют
`rounded-none`	0	таблицы
`rounded-xs`	0.125rem	мелкие метки
`rounded-sm`	0.25rem	бейджи
`rounded-md`	0.375rem	кнопки, поля
`rounded-lg`	0.5rem	карточки, меню
`rounded-xl`	0.75rem	крупные карточки
`rounded-2xl` … `rounded-4xl`	1 … 2rem	модальные окна, «мягкий» стиль
`rounded-full`	9999px	аватары, круглые кнопки

none

2xl

full

<div class="flex flex-wrap items-end gap-3 text-center text-[11px] text-slate-600 dark:text-slate-400">
  <div><div class="size-12 rounded-none bg-slate-300"></div>none</div>
  <div><div class="size-12 rounded-sm bg-slate-300"></div>sm</div>
  <div><div class="size-12 rounded-md bg-slate-300"></div>md</div>
  <div><div class="size-12 rounded-lg bg-slate-300"></div>lg</div>
  <div><div class="size-12 rounded-xl bg-slate-300"></div>xl</div>
  <div><div class="size-12 rounded-2xl bg-slate-300"></div>2xl</div>
  <div><div class="size-12 rounded-full bg-slate-300"></div>full</div>
</div>

Тени

Класс	Смысл
`shadow-xs`	едва заметная — карточка в списке
`shadow-sm`	лежит на поверхности
`shadow-md`	слегка приподнят
`shadow-lg`	всплывающий слой
`shadow-xl`, `shadow-2xl`	модальные окна
`inset-shadow-sm`	внутренняя тень
`drop-shadow-md`	тень по форме объекта

2xl

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

Брейкпоинты

Приставка	rem	px
`sm:`	40	640
`md:`	48	768
`lg:`	64	1024
`xl:`	80	1280
`2xl:`	96	1536

Свой брейкпоинт: --breakpoint-tablet: 60rem; в @theme — появится приставка tablet:.

Ширины контейнеров

Класс	Значение	Где применяют
`max-w-xs`	20rem / 320px	узкая карточка
`max-w-sm`	24rem / 384px	форма входа
`max-w-md`	28rem / 448px	диалог
`max-w-lg`	32rem / 512px	форма
`max-w-xl`, `max-w-2xl`	36 / 42rem	текстовая колонка
`max-w-3xl` … `max-w-7xl`	48 … 80rem	секции страниц
`max-w-prose`	65ch	комфортная длина строки

Те же значения доступны для контейнерных запросов: @md:, @lg: и так далее.