Order

Usage

Use order-{order} to render flex and grid items in a different order than they appear in the DOM.

Responsive

To apply an order utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:order-last to an element would apply the order-last utility at medium screen sizes and above.

<div class="flex">
  <div>1</div>
  <div class="order-first md:order-last">2</div>
  <div>3</div>
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

By default, Tailwind provides utilities for order-first, order-last, order-none, and an order-{number} utility for the numbers 1 through 12. You change, add, or remove these by editing the theme.order section of your tailwind.config.js file.

  // 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',
      }
    }
  }

Variants

默認情況下, 只有 響應式 的 order 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 order 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       order: ['responsive', 'hover'],
      }
    }
  }

Disabling

如果你不打算在專案中使用 order 功能，可以在你的設定檔裡的 corePlugins 屬性中將 order 設定為 false 來停用功能：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     order: false,
    }
  }