Tailwind CSS Tutorial

Tailwind CSS Tutorial Tailwind CSS Installation

Tailwind CSS Layout

Tailwind CSS Container Tailwind CSS Box Sizing Tailwind CSS Display Tailwind CSS Float Tailwind CSS Clear Tailwind CSS Object Fit Tailwind CSS Object Position Tailwind CSS Overflow Tailwind CSS Position Tailwind CSS Top/Right/Bottom/Left Tailwind CSS Visibility Tailwind CSS Z-index

Tailwind CSS Flex Box

Tailwind CSS Flex Direction Tailwind CSS Flex Wrap Tailwind CSS Flex Tailwind CSS Flex Grow Tailwind CSS Flex Shrink Tailwind CSS Order

Tailwind CSS Grid

Tailwind CSS Grid Template Columns Tailwind CSS Grid Column Start End Tailwind CSS Grid Template Rows Tailwind CSS Grid Row Start End Tailwind CSS Grid Auto Flow Tailwind CSS Grid Auto Columns Tailwind CSS Grid Auto Rows Tailwind CSS Gap

Tailwind CSS Alignment

Tailwind CSS Justify Content Tailwind CSS Justify Items Tailwind CSS Justify Self Tailwind CSS Align Content Tailwind CSS Align Items Tailwind CSS Align Self Tailwind CSS Place Content Tailwind CSS Place Items Tailwind CSS Place Self

Tailwind CSS Spacing

Tailwind CSS Padding Tailwind CSS Margin Tailwind CSS Space Between

Tailwind CSS Sizing

Tailwind CSS Width Tailwind CSS Min-Width Tailwind CSS Max-Width Tailwind CSS Height Tailwind CSS Min-Height Tailwind CSS Max-Height

Tailwind CSS Effects

Tailwind CSS Box Shadow Tailwind CSS Opacity

Tailwind CSS SVG

Tailwind CSS Fill Tailwind CSS Stroke Tailwind CSS Stroke Width

Tailwind CSS Order
2022-03-27 15:46:46

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:

Tailwind CSS Order