0
0
Tailwindmarkup~5 mins

Order and self-alignment in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Order and self-alignment help you control where items appear and how they line up inside a container. This makes your page look neat and organized.

You want to change the position of a box inside a row without changing the HTML order.
You want one item to line up differently from others in a list or grid.
You want to move a button to the end of a menu without rearranging the code.
You want to center one item vertically while others stay at the top.
You want to highlight or separate one item by changing its alignment.
Syntax
Tailwind
/* Order syntax */
order-{number}

/* Self-alignment syntax */
self-auto
self-start
self-center
self-end
self-stretch

Order uses numbers to move items forward or backward visually.

Self-alignment changes how one item aligns inside its container, ignoring the container's default alignment.

Examples
The divs appear visually as 'First', 'Second', 'Third' despite being written in HTML as 'Second', 'First', 'Third'.
Tailwind
<div class="flex">
  <div class="order-2">Second</div>
  <div class="order-1">First</div>
  <div class="order-3">Third</div>
</div>
Each item aligns differently vertically inside the container.
Tailwind
<div class="flex items-start h-24">
  <div class="self-center">Center aligned</div>
  <div class="self-end">End aligned</div>
  <div>Default aligned</div>
</div>
Sample Program

This example shows three colored boxes inside a row. They appear in the order: green, red, blue because of the order classes. Each box aligns vertically differently: top, center, and bottom.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Order and Self-Alignment Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Order and Self-Alignment Demo</h1>
  <div class="flex h-24 border border-gray-400">
    <div class="bg-blue-400 text-white p-4 order-3 self-start">Box 1 (order 3, start)</div>
    <div class="bg-green-400 text-white p-4 order-1 self-center">Box 2 (order 1, center)</div>
    <div class="bg-red-400 text-white p-4 order-2 self-end">Box 3 (order 2, end)</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Order only changes visual position, not the actual HTML order. This helps screen readers read content in the correct order.

Self-alignment works only inside flex or grid containers.

Use small order numbers for items you want to appear first.

Summary

Order changes the visual position of items without changing the code order.

Self-alignment lets one item align differently inside its container.

Both help make layouts flexible and easy to adjust.