Порядок

​Основы использования

​Порядок флекс и грид элементов

Используйте утилиты order-* для рендеринга гибких элементов и элементов сетки в другом порядке, чем они отображаются в DOM.

<div class="flex justify-between ...">
  <div class="order-last">01</div>
  <div>02</div>
  <div>03</div>
</div>

​Использование отрицательных значений

Чтобы использовать значение отрицательного порядка, поставьте перед именем класса дефис, чтобы преобразовать его в отрицательное значение.

<div class="-order-1">
  <!-- ... -->
</div>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:order-last, чтобы применять утилиту order-last только при hover.

<div class="order-first hover:order-last">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:order-last, чтобы применить утилиту order-last только на экранах среднего размера и выше.

<div class="order-first md:order-last">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind предоставляет утилиты для order-first, order-last, order-none и утилит с номерами от 1 до 12. Вы можете настроить эти значения, отредактировав theme.order или theme.extend.order в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      order: {
        '13': '13'
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

Если вам нужно использовать одноразовое order, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету с использованием любого произвольного значения.

<div class="order-[13]">
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.