Order and self-alignment in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the first box appear first using Tailwind's order utility.

Tailwind

<div class="flex">
  <div class="order-[1] bg-blue-500 p-4 text-white">Box 1</div>
  <div class="order-1 bg-green-500 p-4 text-white">Box 2</div>
</div>

Drag options to blanks, or click blank then click option'

A0

B2

C3

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-1 on both boxes so order doesn't change.

Using order values greater than 3 which are not standard in Tailwind.

Setting order-0 on Box 1 makes it appear before Box 2 which has order-1. Lower order values appear first.

2fill in blank

medium

Complete the code to center the third box vertically using Tailwind's self-alignment utilities.

Tailwind

<div class="flex h-32">
  <div class="self-start bg-red-400 p-4">Box 1</div>
  <div class="self-end bg-yellow-400 p-4">Box 2</div>
  <div class="self-[1] bg-green-400 p-4">Box 3</div>
</div>

Drag options to blanks, or click blank then click option'

Acenter

Bstretch

Cauto

Dbaseline

Attempts:

3 left

💡 Hint

Common Mistakes

Using self-auto which inherits alignment from the container.

Using self-stretch which makes the item fill the container height.

Using self-center centers the third box vertically within the flex container.

3fill in blank

hard

Fix the error in the code to make the first box appear last using Tailwind's order utility.

Tailwind

<div class="flex">
  <div class="order-[1] bg-purple-600 p-4 text-white">Box 1</div>
  <div class="order-1 bg-pink-600 p-4 text-white">Box 2</div>
  <div class="order-2 bg-indigo-600 p-4 text-white">Box 3</div>
</div>

Drag options to blanks, or click blank then click option'

A0

B1

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-0 or order-1 which place the box earlier.

Using order-2 which places it before Box 3.

Setting order-3 on Box 1 places it after Box 2 (order-1) and Box 3 (order-2), making it appear last.

4fill in blank

hard

Fill both blanks to create a flex container where the second box appears first and the third box is centered vertically.

Tailwind

<div class="flex h-40">
  <div class="order-2 bg-red-400 p-4">Box 1</div>
  <div class="order-[1] bg-green-400 p-4">Box 2</div>
  <div class="order-3 self-[2] bg-blue-400 p-4">Box 3</div>
</div>

Drag options to blanks, or click blank then click option'

A1

Bcenter

Cstart

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-0 on Box 2 which places it before Box 3 incorrectly.

Using self-start which aligns Box 3 at the top.

Setting order-1 on Box 2 makes it appear before Box 1 (order-2). Using self-center on Box 3 centers it vertically.

5fill in blank

hard

Fill all three blanks to create a flex container where Box A appears last, Box B is centered vertically, and Box C appears first.

Tailwind

<div class="flex h-48">
  <div class="order-[1] bg-yellow-400 p-4">Box A</div>
  <div class="order-2 self-[2] bg-pink-400 p-4">Box B</div>
  <div class="order-[3] bg-teal-400 p-4">Box C</div>
</div>

Drag options to blanks, or click blank then click option'

A3

Bcenter

C0

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-1 or order-2 for Box A which places it earlier.

Not using self-center for Box B so it stays top aligned.

Using order-1 or order-2 for Box C which places it after other boxes.

Box A with order-3 appears last. Box B with self-center is vertically centered. Box C with order-0 appears first.

Practice

1. What does the order utility in Tailwind CSS do?

easy

A. Changes the visual position of an item without changing the HTML order

B. Changes the font size of an element

C. Adds margin around an element

D. Changes the background color of an element

Solution

1. Step 1: Understand the purpose of order

   The order utility changes the visual order of flex items without changing their order in the HTML code.

2. Step 2: Compare with other options

   Options A, C, and D describe unrelated CSS properties like font size, margin, and background color, which are not related to order.

3. Final Answer:

   Changes the visual position of an item without changing the HTML order -> Option A

4. Quick Check:

   Order changes visual position only [OK]

Hint: Order changes visual position, not HTML structure [OK]

Common Mistakes:

• Confusing order with margin or padding
• Thinking order changes HTML code
• Mixing order with color or font utilities

2. Which Tailwind class correctly sets an item to appear first in a flex container?

easy

A. order-last

B. order-1

C. order-first

D. order-0

Solution

1. Step 1: Identify the class for first order

   In Tailwind, order-first sets the item to appear before all others visually.

2. Step 2: Understand other options

   order-last places the item last, order-1 and order-0 set numeric order but order-first is the special class for first position.

3. Final Answer:

   order-first -> Option C

4. Quick Check:

   Use order-first to appear first [OK]

Hint: order-first always places item visually first [OK]

Common Mistakes:

• Using order-1 instead of order-first for first position
• Confusing order-last with order-first
• Assuming order-0 is always first

3. Given this HTML and Tailwind CSS:

<div class="flex">
  <div class="order-2">A</div>
  <div class="order-1">B</div>
  <div class="order-3">C</div>
</div>

What is the visual order of the items displayed in the browser?

medium

A. A B C

B. B A C

C. C B A

D. B C A

Solution

1. Step 1: Understand the order values

   Items have order values: A=2, B=1, C=3. Lower order values appear first visually.

2. Step 2: Arrange items by order

   Order 1 (B) appears first, then order 2 (A), then order 3 (C). So visual order is B A C.

3. Final Answer:

   B A C -> Option B

4. Quick Check:

   Lower order value appears first [OK]

Hint: Lower order number means earlier visual position [OK]

Common Mistakes:

• Assuming HTML order is visual order
• Mixing up order numbers
• Ignoring that order affects only visual placement

4. You want to align one flex item to the end vertically inside a flex container. Which Tailwind class should you add to that item?

medium

A. self-start

B. self-center

C. items-end

D. self-end

Solution

1. Step 1: Understand self-alignment classes

   self-end aligns the single item to the end of the cross axis (vertical in a row flex container).

2. Step 2: Differentiate from container alignment

   items-end aligns all items, but self-end targets only one item.

3. Final Answer:

   self-end -> Option D

4. Quick Check:

   Use self-end for single item vertical end alignment [OK]

Hint: self-end aligns one item at container's end vertically [OK]

Common Mistakes:

• Using items-end to align only one item
• Confusing self-start with self-end
• Not understanding self- vs items- prefixes

5. You have a flex container with three items. You want the second item to appear last visually but keep its vertical alignment centered, while the others align to the start vertically. Which Tailwind classes should you apply to the second item?

hard

A. order-last self-center

B. order-last items-start

C. order-3 self-start

D. order-3 items-center

Solution

1. Step 1: Set visual order to last

   Use order-last to make the second item appear last visually.

2. Step 2: Align only the second item vertically centered

   Use self-center to align that item vertically center without affecting others.

3. Step 3: Confirm other options

   items-start and items-center affect all items, not just one. order-3 is numeric but order-last is clearer for last position.

4. Final Answer:

   order-last self-center -> Option A

5. Quick Check:

   order-last + self-center for last and centered item [OK]

Hint: Combine order-last with self-center for last and centered item [OK]

Common Mistakes:

• Using items-start or items-center instead of self- classes
• Using numeric order instead of order-last
• Aligning all items instead of just one