Утилиты для управления порядком элементов гибкости и сетки.
Используйте order-{order} для рендеринга элементов гибкости и сетки в другом порядке, чем они отображаются в DOM.
<div class="flex justify-between ...">
<div class="order-last">1</div>
<div>2</div>
<div>3</div>
</div>Чтобы применить служебную программу заказа только к определенной контрольной точке, добавьте префикс {screen}: к существующему имени класса. Например, добавление класса md:order-last к элементу приведет к применению утилиты order-last при средних размерах экрана и выше.
<div class="flex">
<div>1</div>
<div class="order-first md:order-last">2</div>
<div>3</div>
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию Tailwind предоставляет утилиты для order-first, order-last, order-none и order-{number} для чисел от 1 до 12. Вы меняете, добавляете или удаляете их, отредактировав раздел theme.order Вашего файла tailwind.config.js.
// tailwind.config.js
module.exports = {
theme: {
order: {
first: '-9999',
last: '9999',
- none: '0',
+ normal: '0',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
- '7': '7',
- '8': '8',
- '9': '9',
- '10': '10',
- '11': '11',
- '12': '12',
}
}
}По умолчанию, только responsive варианты создаются для утилит order.
Вы можете контролировать, какие варианты создаются для утилит order для изменения свойства order в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ order: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения order, Вы можете полностью отключить их, установив для order свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ order: false,
}
}