Order

Usage

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

Responsive

To apply a flex direction utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:flex-row to an element would apply the flex-row 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,
    }
  }