Tailwind CSS Order

The order utility class in Tailwind CSS is used to specify the visual order of an element among its siblings.

Syntax

The syntax for using the order utility class in Tailwind CSS is as follows:

<div class="order-{number}"></div>

Where number can be a value from -999 to 999 indicating the visual order of the element (default value is 0).

Example

Consider the following example where we have three <div> elements in a <div> container:

<div class="flex flex-col">
  <div class="order-3 bg-red-500">Element 1</div>
  <div class="order-2 bg-blue-500">Element 2</div>
  <div class="order-1 bg-green-500">Element 3</div>
</div>

In this example, we have specified the order of the elements using the order utility class. As you can see, the order classes can re-arrange the elements visually depending on the order value specified.

Output

The output of the above example will be as follows:

Explanation

The order utility class changes the visual order of an element among its siblings. By default, all elements have a 0 order value, so they are displayed in the order they appear in the HTML.

When we add an order class to an element, we change its order value, and the element will appear visually before or after its siblings depending on the value of the order class.

In the example above, we have given the third element order-1, second element order-2 and the first element order-3. This causes them to be displayed in reverse order.

Use

The order utility class can be used in scenarios where you want to change the visual order of elements without changing the HTML structure. It can be useful in cases where you want to control the display of elements in different screen sizes to improve the user experience.

Important Points

• The order utility class only works on flexbox containers, as this is where order matters.
• The values for the order class range from -999 to 999.
• By default, all elements have an order value of 0.

Summary

In this article, we learned about the order utility class in Tailwind CSS, which is used to specify the visual order of elements in a flexbox container. We looked at examples of how to use the order class, the syntax for using the class, the output it produces, and the important points to keep in mind while using it.