Порядок

​

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

​

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

Используйте order-{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 и order-{number} для чисел от 1 до 12. Вы можете настроить эти значения, отредактировав theme.order или theme.extend.order в вашем файле tailwind.config.js.

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

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

​

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

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

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

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