Условия действия модификаторов
Базовые модификаторы представляют собой классы действующие без условий. Для ограничения действия модификаторов определенными ситуациями используются условия.
Условия действия определяют, когда данный модификатор будет активным. Условие действия добавляется перед модификатором и отделяется от него знаком двоеточия (:). Предусмотрены два вида условий:
- условия адаптивности,
- условия состояния.
Условия адаптивности
Модификаторы с условием адаптивности срабатывают только если область просмотра больше определенного размера.
Условия адаптивности могут принимать следующие значения:
- sm (small) – для экранов от 576 px.
- md (medium) – для экранов от 768 px.
- lg (large) – для экранов от 992 px.
- xl (extra large) – для экранов от 1200 px.
Если условие адаптивности не задано, то модификатор применяется при любом размере области просмотра.
Например: md:p-1, xl:max-container-2, lg:m-1.
Условия состояния
Модификаторы с условием состояния срабатывают только, если элемент находится в определенном состоянии.
Условия состояния могут принимать следующие значения:
- hover – для элемента, над которым наведен курсор.
- focus – для элемента, на котором установлен фокус.
- active – для активного элемента.
Если условие состояния не задано, то модификатор применяется для всех состояний.
Например: hover:bg-error, focus:ring, active:сolor-gray-6.