「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Order

Utilities for controlling the order of flex and grid items.

Default class reference

Class
屬性
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;
order-5order: 5;
order-6order: 6;
order-7order: 7;
order-8order: 8;
order-9order: 9;
order-10order: 10;
order-11order: 11;
order-12order: 12;
order-firstorder: -9999;
order-lastorder: 9999;
order-noneorder: 0;

Usage

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

1
2
3
<div class="flex justify-between ...">
  <div class="order-last">1</div>
  <div>2</div>
  <div>3</div>
</div>

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.jsvariants 區塊中變更 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,
    }
  }