Tailwind CSS Order
One of the best features of Tailwind CSS is the Order class, which allows us to order flex and grid objects according to our needs. There are several different order classes. The flex and grid components are rendered in a different order than they exist in the DOM using this class.
Order
- order-1
- order-2
- order-3
- order-4
- order-5
- order-6
- order-7
- order-8
- order-9
- order-10
- order-11
- order-12
- order-first
- order-last
- order-none
Syntax:
<element order- number | string >
Parameter: This class accepts two sorts of parameters, but only one can be used at a time, and it must be the order number or the position you specify.
number: An integer number that will be used to track the order index.
string: Only accept the last and first in word order index position.
Example: In this example, we put the order-last on the first flex item and the order-first on the fifth flex item, resulting in a different order list than usual.
This is example for tailwind CSS order:
<!DOCTYPE html> <html> <head> <title>Tailwind CSS order Class</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Tailwind CSS order Class</b> <div id="main" class="flex flex-row justify-evenly"> <div class="bg-red-900 order-last w-24 h-12">1</div> <div class="bg-red-800 w-24 h-12">2</div> <div class="bg-red-700 w-24 h-12">3</div> <div class="bg-red-600 w-24 h-12">4</div> <div class="bg-red-500 order-first w-24 h-12">5</div> <div class="bg-red-400 w-24 h-12">6</div> </div> </body> </html>
Output:
