📐 Шпаргалка утилит Tailwind

Все основные группы классов с соответствием CSS

Раскладка

Классы	CSS	Комментарий
`block`, `inline-block`, `inline`	`display`	базовое поведение элемента
`flex`, `inline-flex`, `grid`, `inline-grid`	`display`	контейнеры раскладки
`hidden`	`display: none`	убрать из потока и из обхода клавиатурой
`sr-only`	скрыть визуально	оставить для скринридера
`static`, `relative`, `absolute`, `fixed`, `sticky`	`position`	урок 10
`inset-0`, `top-4`, `-bottom-2`, `start-0`	смещения	работают у позиционированных элементов
`z-0` … `z-50`, `isolate`	`z-index`	слои и контекст наложения
`overflow-hidden`, `overflow-x-auto`, `overflow-clip`	`overflow`	обрезка и прокрутка
`float-start`, `clear-both`	`float`, `clear`	редко нужны в современной вёрстке
`container`	ширина по брейкпоинту	чаще используют `mx-auto max-w-*`
`aspect-video`, `aspect-square`	`aspect-ratio`	пропорции медиа-блоков
`columns-2`, `break-inside-avoid`	многоколоночный текст	для длинных списков

Flexbox и Grid

Классы	Что делают
`flex-row`, `flex-col`, `flex-wrap`	направление и перенос
`justify-start\|center\|end\|between\|around\|evenly`	распределение по главной оси
`items-start\|center\|end\|baseline\|stretch`	выравнивание по поперечной оси
`self-start\|center\|end`	выравнивание одного элемента
`flex-1`, `flex-auto`, `flex-none`	рост и сжатие
`grow`, `grow-0`, `shrink`, `shrink-0`	по отдельности
`basis-1/2`, `basis-64`	стартовый размер
`order-first`, `order-last`, `order-2`	порядок отображения
`grid-cols-1` … `grid-cols-12`	равные колонки
`grid-cols-[200px_1fr]`	произвольный шаблон (пробел = `_`)
`grid-rows-*`, `auto-rows-fr`, `auto-rows-min`	строки сетки
`col-span-2`, `col-span-full`, `col-start-2`	объединение и положение
`row-span-2`, `row-start-1`	то же по строкам
`gap-4`, `gap-x-2`, `gap-y-6`	промежутки
`place-items-center`, `justify-items-start`	содержимое ячеек

Отступы

Классы	CSS
`p-4`, `px-3`, `py-2`, `pt-6`, `ps-4`	`padding` и его стороны
`m-4`, `mx-auto`, `mt-8`, `-mt-2`, `me-3`	`margin`, включая отрицательный
`space-x-4`, `space-y-2`	отступ между соседями
`gap-*`	промежуток в flex и grid — предпочтительнее
`p-[18px]`	произвольное значение

Числовая шкала: значение × 0.25rem. Полная таблица — «Шкалы значений».

Размеры

Классы	Комментарий
`w-64`, `h-32`, `size-10`	значения из шкалы; `size` задаёт обе стороны
`w-full`, `w-screen`, `w-fit`, `w-min`, `w-max`	относительные и контентные размеры
`w-1/2`, `w-2/3`, `w-5/12`	дроби
`min-w-0`, `max-w-sm`, `max-w-prose`	ограничения; `min-w-0` нужен для обрезки во flex
`min-h-svh`, `min-h-dvh`, `h-svh`	высота вьюпорта без «прыжков» на мобильных
`max-h-[80vh]`	ограничение высоты у прокручиваемых блоков

Типографика

Классы	Комментарий
`text-xs` … `text-9xl`	размер вместе с межстрочным интервалом
`text-3xl/9`	размер и свой интервал одной записью
`font-normal`, `font-medium`, `font-semibold`, `font-bold`	начертание
`font-sans`, `font-mono`	семейство из темы
`leading-tight`, `leading-relaxed`	межстрочный интервал
`tracking-tight`, `tracking-widest`	межбуквенное расстояние
`text-left`, `text-center`, `text-start`	выравнивание
`truncate`, `line-clamp-2`	обрезка текста
`text-balance`, `text-pretty`	аккуратные переносы
`break-words`, `whitespace-nowrap`	перенос и запрет переноса
`uppercase`, `capitalize`, `italic`	регистр и стиль
`tabular-nums`	моноширинные цифры для таблиц
`underline`, `decoration-2`, `underline-offset-4`	подчёркивание
`list-disc`, `list-inside`, `marker:text-slate-400`	списки

Цвет

Классы	Комментарий
`bg-`, `text-`, `border-`, `ring-`, `divide-*`	одно значение — разные свойства
`decoration-`, `placeholder:text-`, `caret-`, `accent-`	детали форм и текста
`fill-`, `stroke-`	SVG
`bg-slate-900/60`	прозрачность через дробь
`bg-linear-to-r`, `from-`, `via-`, `to-*`	градиенты
`bg-radial`, `bg-conic`	другие типы градиентов
`text-current`, `border-current`, `bg-transparent`	служебные значения

Все оттенки с образцами — в справочнике «Палитра и OKLCH».

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

Классы	Комментарий
`border`, `border-2`, `border-t`, `border-s`	толщина и стороны
`border-slate-200`	цвет — отдельным классом, иначе будет `currentColor`
`border-dashed`, `border-dotted`	стиль линии
`divide-y`, `divide-slate-200`	линии между детьми
`rounded-sm` … `rounded-4xl`, `rounded-full`	скругления
`rounded-t-lg`, `rounded-bl-xl`	по сторонам и углам
`shadow-xs` … `shadow-2xl`, `shadow-none`	тени
`inset-shadow-sm`, `text-shadow-sm`, `drop-shadow-md`	специальные тени
`ring`, `ring-2`, `ring-offset-2`, `ring-inset`	кольцо (в v4 `ring` = 1px)
`outline-2`, `outline-offset-2`, `outline-hidden`	контур фокуса

Эффекты и движение

Классы	Комментарий
`opacity-50`, `mix-blend-multiply`	прозрачность и смешивание
`blur-sm`, `backdrop-blur-xs`, `grayscale`, `saturate-150`	фильтры
`transition`, `transition-colors`, `transition-transform`	что анимировать
`duration-150`, `delay-100`, `ease-out`	время и кривая
`scale-105`, `rotate-45`, `translate-x-2`, `skew-y-3`	трансформации
`origin-bottom`, `transform-gpu`, `will-change-transform`	детали трансформаций
`animate-spin`, `animate-pulse`, `animate-ping`, `animate-bounce`	встроенные анимации
`animate-none`, `motion-reduce:animate-none`	отключение движения

Интерактивность и прочее

Классы	Комментарий
`cursor-pointer`, `cursor-not-allowed`	вид курсора
`select-none`, `select-all`	выделение текста
`pointer-events-none`, `pointer-events-auto`	перехват кликов
`scroll-smooth`, `scroll-mt-16`	прокрутка к якорям под липкой шапкой
`snap-x`, `snap-center`, `snap-mandatory`	карусели
`overscroll-contain`	не пробрасывать прокрутку наружу
`touch-pan-y`, `touch-none`	жесты на сенсорных экранах
`appearance-none`, `field-sizing-content`	сброс системного вида, авторазмер поля
`@container`, `@md:flex`	контейнерные запросы

⚠️ Проверить по документации: это выборка самых востребованных утилит, а не полный перечень. Полный список всегда есть в разделах документации по свойствам CSS.