🎛️ Справочник модификаторов

Состояния, зависимости, атрибуты, адаптивность, среда

Состояния элемента

Модификатор	Когда срабатывает	Пример
`hover:`	курсор над элементом	`hover:bg-slate-100`
`focus:`	элемент в фокусе	`focus:ring-2`
`focus-visible:`	фокус с клавиатуры	`focus-visible:outline-2`
`focus-within:`	фокус внутри элемента	`focus-within:border-sky-500`
`active:`	нажатие	`active:scale-95`
`visited:`	посещённая ссылка	`visited:text-violet-700`
`disabled:`	отключён	`disabled:opacity-50`
`checked:`, `indeterminate:`	чекбокс и радио	`checked:bg-sky-600`
`required:`, `invalid:`, `read-only:`	состояния поля	`invalid:border-rose-500`
`placeholder:`	текст-подсказка	`placeholder:text-slate-400`
`selection:`	выделенный текст	`selection:bg-sky-200`
`file:`	кнопка выбора файла	`file:mr-2`
`marker:`	маркер списка	`marker:text-slate-400`
`before:`, `after:`	псевдоэлементы	`after:block`

Зависимости между элементами

Модификатор	Смысл
`group` + `group-hover:`	реакция на состояние предка
`group-focus-within:`, `group-open:`	другие состояния предка
`group-has-[a]:`	у предка есть такой потомок
`group/name` + `group-hover/name:`	именованные группы для вложенности
`peer` + `peer-checked:`	реакция на соседа выше по разметке
`peer-focus-visible:`, `peer-disabled:`	другие состояния соседа
`has-[:checked]:`, `has-checked:`	реакция на содержимое
`in-focus:`	элемент внутри сфокусированного предка
`:`, `*:`	прямые дети и все потомки

peer-checked в действии

<label class="inline-flex cursor-pointer items-center gap-3">
  <input type="checkbox" class="peer sr-only" checked>
  <span class="relative h-6 w-11 rounded-full bg-slate-300 transition-colors peer-checked:bg-emerald-500">
    <span class="absolute top-0.5 left-0.5 size-5 rounded-full bg-white transition-transform peer-checked:translate-x-5"></span>
  </span>
  <span class="text-sm text-slate-700 peer-checked:text-emerald-700">peer-checked в действии</span>
</label>

Атрибуты

Модификатор	Условие
`data-[state=open]:`	атрибут со значением (стиль Radix)
`data-open:`, `data-closed:`, `data-checked:`	булев атрибут (стиль Base UI)
`data-highlighted:`, `data-selected:`	состояния пунктов меню и вкладок
`aria-expanded:`, `aria-selected:`, `aria-invalid:`	ARIA-атрибуты
`aria-[current=page]:`	ARIA со значением
`open:`	раскрытый `<details>`
`target:`	элемент — цель якоря

Позиция среди соседей

Модификатор	Условие
`first:`, `last:`, `only:`	первый, последний, единственный
`odd:`, `even:`	чётность — зебра в таблицах
`nth-3:`, `nth-last-2:`	по номеру
`empty:`	элемент без содержимого
`not-first:`, `not-hover:`	отрицание условия

Адаптивность

Модификатор	Ширина
`sm:`	от 40rem / 640px
`md:`	от 48rem / 768px
`lg:`	от 64rem / 1024px
`xl:`	от 80rem / 1280px
`2xl:`	от 96rem / 1536px
`max-md:`	до 768px
`md:max-xl:`	диапазон 768–1280px
`min-[720px]:`, `max-[420px]:`	произвольные значения
`@container` + `@md:`	по ширине контейнера, а не окна
`@lg/sidebar:`	по именованному контейнеру

Среда и устройство

Модификатор	Условие
`dark:`	тёмная тема
`motion-safe:`, `motion-reduce:`	настройка анимаций в системе
`pointer-coarse:`, `pointer-fine:`	сенсорный или точный ввод
`portrait:`, `landscape:`	ориентация экрана
`print:`	печать
`supports-[display:grid]:`	поддержка свойства браузером
`starting:`	начальные значения при появлении элемента
`rtl:`, `ltr:`	направление письма

Свои варианты

/* тёмная тема по классу вместо системной настройки */
@custom-variant dark (&:where(.dark, .dark *));

/* только на устройствах с точным вводом */
@custom-variant pointer-fine (@media (pointer: fine));

/* произвольный селектор прямо в классе */
<div class="[&_svg]:size-4 [&>p]:mt-2 [.is-active_&]:font-bold">…</div>

Запись	Смысл
`[&_svg]:`	любой потомок `svg`
`[&>p]:`	только прямые потомки
`[.dark_&]:`	элемент внутри `.dark`
`[&:nth-child(3)]:`	произвольный псевдокласс
`class!`	`!important` — крайняя мера

Порядок модификаторов: адаптив:состояние:тема:утилита, например md:hover:dark:bg-slate-800. Технически порядок свободный, но единообразие упрощает чтение.