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

By default, only responsive variants are generated for order utilities.

You can control which variants are generated for the order utilities by modifying the order property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

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

Disabling

If you don't plan to use the order utilities in your project, you can disable them entirely by setting the order property to false in the corePlugins section of your config file:

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