Условия действия

Условие говорит, когда работает утилита: на какой ширине экрана, в каком состоянии элемента или при какой ширине контейнера. Оно ставится перед классом и отделяется двоеточием. Класс без условия действует всегда — на любой ширине и в любом состоянии, пока его не перекроет более подходящее правило.

Ширина экрана: контрольные точки

Адаптивные условия включают утилиту начиная с заданной ширины окна. Это подход mobile first: сначала без условия описывается вид на узком экране, затем условиями — изменения для более широких.

Контрольные точки стоят на ступенях размерной шкалы и записаны в rem, поэтому сдвигаются вместе с размером шрифта, который пользователь выбрал в браузере. Переменные --sf-breakpoint-sm … --sf-breakpoint-xxl называют те же ступени: ими удобно задавать ширины, согласованные с точками. Сам медиазапрос переменную не читает, поэтому в своём CSS пишите значение из таблицы.

<div class="flex flex-col md:flex-row gap-2 lg:gap-4">
  <aside class="w-full md:w-1/3">…</aside>
  <main class="w-full md:w-2/3">…</main>
</div>

До md блоки идут колонкой, от md — строкой, а от lg промежуток между ними увеличивается.

Правила работы с контрольными точками:

• Условие относится только к своему классу. md: в одном классе не влияет на соседние.
• Более широкое условие перекрывает более узкое в своём диапазоне: стили подключаются в порядке «без условия → sm → md → lg → xl → xxl». Порядок классов в атрибуте class на результат не влияет.
• Адаптивные варианты есть не у всех утилит, а у тех, где они имеют смысл: отображение, раскладка, размеры, отступы, выравнивание, позиция. У цвета текста и фона адаптивных вариантов нет. Наличие вариантов указано на странице утилиты (см. Строка «Условия» в справочнике).

Мобильный и десктопный режим

Кроме пяти контрольных точек, Framework делит экраны на два режима: мобильный — до 60rem и десктопный — от 60rem (граница совпадает с lg). Отдельных условий mobile: и desktop: в именах классов нет. Режим переключает значения токенов: шкала отступов, размеры текста, высота контролов на десктопе крупнее.

Поэтому одна и та же разметка p-2 gap-1 text-3 на телефоне плотнее, а на десктопе просторнее — без единого адаптивного условия. Условия ширины нужны для изменения структуры (колонка → строка, скрыть → показать), а не для подгонки размеров. Подробно о том, как адаптируются размеры, — в Адаптивные размеры.

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

Условия состояния включают утилиту в определённом состоянии элемента:

<button class="bg-primary color-on-primary hover:bg-primary active:bg-primary
               focus-visible:ring-2 focus-visible:ring-primary">
  Сохранить
</button>

Запись bg-primary hover:bg-primary не повторяет одно и то же. Утилита фона в состоянии берёт токен состояния роли: hover:bg-primary задаёт var(--sf-primary-hover), active:bg-primary — var(--sf-primary-active). Цвет при наведении и нажатии выбирает тема, а не автор разметки. Утилиты цвета текста и границы в состоянии так не делают: hover:color-primary даёт ту же var(--sf-primary), а hover:border-primary — var(--sf-outline-primary).

Варианты состояний есть у утилит, которым они нужны: например, у цвета текста, фона и границы, заливки и обводки SVG, тени, прозрачности, фильтров, преобразований, насыщенности шрифта, контура и кольца фокуса. Набор состояний у семейств разный: у одних только hover:, у других ещё focus:, focus-visible: и active:. У геометрии (отступы, размеры, раскладка) состояний нет: элемент не должен менять размер и сдвигать соседей при наведении.

Для фокуса — focus-visible:. Компоненты Framework показывают кольцо фокуса только при работе с клавиатуры. Варианты focus: срабатывают и от клика мышью. Для контура и кольца фокуса используйте focus-visible: (focus-visible:ring-2, focus-visible:outline-primary). Правила видимого фокуса — в Фокус.

Не делайте наведение единственным способом узнать важное: на сенсорном экране наведения нет. И не передавайте важное состояние одним цветом: добавьте текст, форму или иконку.

Ширина контейнера

Контрольные точки смотрят на ширину окна. Но один и тот же блок может стоять и в широкой основной области, и в узкой боковой колонке. Для таких случаев есть условия ширины контейнера.

Сначала элемент объявляется контейнером классом query-container. Затем потомки получают условия cq-sm:, cq-md:, cq-lg:, cq-xl: — с теми же порогами sm, md, lg и xl, но измеренными по ширине контейнера.

<section class="query-container">
  <div class="flex flex-col cq-md:flex-row gap-2">…</div>
</section>

Если контейнеры вложены, ближайший можно назвать: query-container/sidebar и условие cq-md/sidebar:flex-row будет смотреть именно на него. Набор имён закрыт и задаётся контрактом Framework; в нём одно имя — sidebar.

Условия контейнера есть только у утилит раскладки: отображение, направление и перенос Flex, промежутки, колонки сетки, justify-* и items-cross-*. В разметке пишите cq-sm:justify-between: в таблице стилей этот класс называется cq-sm:content-main-between, и Loader переводит запись из разметки в это имя. Этого достаточно, чтобы блок перестраивался под своё место.

Условия контейнера нужны и там, где рядом с областью стоит панель, ширину которой меняет человек (например, меню с ручкой ширины). Окно при этом остаётся прежним, и условия md: не заметят, что для содержимого места стало меньше. Объявите контейнером саму область (<main class="query-container">) и раскладку внутри неё задавайте условиями cq-*.

Строка «Условия» в справочнике

На странице каждой утилиты в справочнике под таблицей классов стоит строка «Условия». Она говорит, какие условия есть у этого семейства:

Условия: ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:svg-1/4.
Условия: ширина экрана — нет; состояния — active:, hover:. Например: active:bg-surface-container.

• Ширина экрана — контрольные точки из Ширина экрана: контрольные точки. Если перечислены sm: … xxl:, любой класс семейства можно записать с любой из них: md:p-2, xl:hidden. «Нет» — класс действует на всех ширинах, и записи вида md:bg-primary не существует.
• Состояния — условия из Состояния элемента: ровно те, что перечислены. Если указан только hover:, записи focus: или active: у семейства нет.
• Пример — готовая запись класса с условием из этого семейства.

У страницы Адаптация по размеру контейнера в той же строке перечислены условия ширины контейнера cq-sm: … cq-xl: и их варианты с именем /sidebar (см. Ширина контейнера).

Записи, которой нет в строке «Условия», нет и в таблицах стилей: Loader не найдёт для неё модуль, и класс ничего не сделает (см. Точные правила).

Условия не сочетаются

В одном классе — одно условие. Записей вида md:hover:bg-primary или cq-sm:hover:flex-row нет, Loader их не распознает. Если нужно поведение «наведение только на широком экране», это уже задача компонента или собственного CSS проекта (см. Утилиты и компоненты: где проходит граница).

Тема и направление письма — не условия

Условий для темы и направления письма нет: эти вещи решаются без условий.

Тема. Светлую или тёмную тему включает класс theme-light или theme-dark на корне страницы или на любом контейнере. Цветовые роли внутри переключаются сами, поэтому bg-surface-container правильно выглядит в обеих темах. Классов вида dark:bg-… нет и не нужно. Устройство тем — в Темы.

Направление письма. Утилиты сторон и выравнивания логические (inline-start, inline-end, start, end). Направление задаёт атрибут dir у документа или контейнера, и те же классы зеркалятся сами. Для старых браузеров сборка добавляет физические запасные правила с учётом dir. Классов вида rtl:… поэтому нет.

Физическая сторона нужна редко: когда сторона экрана важна сама по себе (координаты, жест перетаскивания). Тогда это задача собственного CSS, а не утилиты.

Смотрите также: Темы — темы; Адаптивные размеры — адаптация размеров; Фокус — видимый фокус; Утилиты и компоненты: где проходит граница — граница между утилитами и компонентами.