Tailwind CSS - Order

Previous
Quiz
Next

Tailwind CSS Order is a utility class that specifies the order of flex and grid items within its container.

Tailwind CSS Order Classes

The following is the list of Tailwind CSS Order classes that specifies the ordered arrangement of flex and grid items.

Class CSS Properties
order-1 order: 1;
order-2 order: 2;
order-3 order: 3;
order-4 order: 4;
order-5 order: 5;
order-6 order: 6;
order-7 order: 7;
order-8 order: 8;
order-9 order: 9;
order-10 order: 10;
order-11 order: 11;
order-12 order: 12;
order-first order: -9999;
order-last order: 9999;
order-none order: 0;

Functionality of Tailwind CSS Order

  • order-*: This class is used to apply different ordered arrangements on flex and grid items. {*} represents here different order ranges from 1 to 12.
  • order-first: This class replaces the CSS order: -9999; property. This class is used to order the flex and grid items to the beginning of the container without focussing on their position in the DOM.
  • order-last: This class replaces the CSS order: 9999; property. This class is used to order the flex and grid items to the end of the container without focussing on their position in the DOM.
  • order-none: This class replaces the CSS order: 0 property. This class specifies the default behavior of flex and grid items, keeping their same position as they are in DOM.

Tailwind CSS Order Class Examples

The following examples will illustrate the Tailwind CSS Order class utility.

Arranging Flex Items

The order-* utility can effectively work with flex items, as shown in the example below.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
<h2 class="text-2xl mb-3">
    Tailwind CSS Order Class
</h2>
<div class="flex">
    <div class="order-2 bg-green-600 p-4 w-16 mr-2
                border-2 border-green-800 rounded">
        Flex Item 1
    </div>
    <div class="order-1 bg-green-500 p-4 w-16 mr-2
                border-2 border-green-800 rounded">
        Flex Item 2
    </div>
    <div class="order-4 bg-green-400 p-4 w-16 mr-2
                border-2 border-green-800 rounded">
        Flex Item 3
    </div>
    <div class="order-3 bg-green-300 p-4 w-16 mr-2
                border-2 border-green-800 rounded">
        Flex Item 4
    </div>
</div>
</body>

</html>

Sequentially positioning Flex Items

The order-first & order-last utility effectively positions flex items, as shown in the example below.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Order First & Order Last Class
    </h2>
    <div class="flex">
        <div class="bg-green-600 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        
        <!--Below div has given order-last class which make it to 
            positioned in the last-->
        <div class="order-last bg-green-500 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        
        <!--Below div has given order-first class which make it to 
            positioned in the first-->
        <div class="order-first bg-green-400 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
        
        <div class=" bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 4
        </div>
    </div>
</body>

</html>

Arranging Grid Items

The order-first & order-last utility effectively positions grid items, as shown in the example below.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Order Class On Grid Layout
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-600 p-4 order-6">Item 1</div>
        <div class="bg-green-500 p-4 order-5">Item 2</div>
        <div class="bg-green-400 p-4 order-4">Item 3</div>
        <div class="bg-green-300 p-4 order-3">Item 4</div>
        <div class="bg-green-200 p-4 order-2">Item 5</div>
        <div class="bg-green-100 p-4 order-1">Item 6</div>
    </div>
</body>

</html>
Print Page
Previous
Next