Divide utilities between children in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

How does space-x-4 affect child elements?

Given a parent container with space-x-4 in Tailwind CSS, what visual effect will the children have?

Tailwind

<div class="flex space-x-4">
  <div class="bg-blue-500 p-4">Child 1</div>
  <div class="bg-green-500 p-4">Child 2</div>
  <div class="bg-red-500 p-4">Child 3</div>
</div>

A Children will overlap horizontally with no gap.

B Each child will have a 1rem vertical gap between them.

C Each child will have a 1rem horizontal gap between them.

D Each child will have a 4px horizontal gap between them.

💡 Hint

Think about what space-x-4 means in Tailwind's spacing scale.

The space-x-4 utility adds horizontal margin between direct children of a flex container. The '4' corresponds to 1rem (16px by default). This creates a consistent horizontal gap between children.

❓ selector

intermediate

Which Tailwind utility divides children vertically with equal spacing?

You want to stack children vertically with equal space between them inside a parent. Which utility achieves this?

Tailwind

<div class="???">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

A grid grid-cols-3 gap-x-6

B flex flex-col space-y-6

C flex space-x-6

D block space-x-6

💡 Hint

Consider the direction of stacking and the spacing utility for vertical gaps.

flex flex-col stacks children vertically. space-y-6 adds vertical spacing (1.5rem) between children. Other options either create horizontal spacing or grid layouts.

🧠 Conceptual

advanced

What happens if you apply space-x-4 to a non-flex container?

Consider this HTML:

One Two Three

What is the visual effect on the children?

Tailwind

<div class="space-x-4">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</div>

A Children get 1rem horizontal margin between them regardless of container display.

B No horizontal spacing is added between children because <code>space-x-4</code> requires a flex or grid container.

C Children stack vertically with 1rem vertical spacing.

D Children overlap horizontally with no spacing.

💡 Hint

Think about how Tailwind's space utilities work internally.

The space-x-4 utility adds 1rem horizontal margin between consecutive child elements using the CSS general sibling selector (~). It works regardless of the container's display type (flex, grid, or block). In this case, the inline <span> elements will have horizontal spacing between them.

❓ accessibility

advanced

How to maintain keyboard focus order when using space-x-4?

You have a horizontal list of buttons spaced with space-x-4. What should you ensure for good keyboard navigation?

Tailwind

<div class="flex space-x-4" role="group" aria-label="Options">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

A Wrap each button in a <code>label</code> to improve focus.

B Add <code>tabindex="-1"</code> to all buttons except the first to skip them.

C Use JavaScript to reorder focus because <code>space-x-4</code> changes visual order but not DOM order.

D Ensure the buttons are in the correct DOM order; <code>space-x-4</code> does not affect focus order.

💡 Hint

Focus order follows DOM order, not visual spacing.

space-x-4 only adds spacing visually. Keyboard focus follows the DOM order, so no special changes are needed if DOM order is correct.

📝 Syntax

expert

What is the correct Tailwind utility to divide children with a 2rem gap horizontally and 1rem vertically?

You want a container that spaces children with 2rem horizontally and 1rem vertically. Which utility combination is correct?

Tailwind

<div class="???">
  <div>Child A</div>
  <div>Child B</div>
  <div>Child C</div>
</div>

A flex flex-wrap gap-x-8 gap-y-4

B grid grid-cols-3 gap-8 gap-4

C flex space-x-8 space-y-4

D flex flex-col space-x-8 space-y-4

💡 Hint

Use the gap utilities for both horizontal and vertical spacing in flex wrap layout.

gap-x-8 sets horizontal gap to 2rem, gap-y-4 sets vertical gap to 1rem. Using flex flex-wrap allows children to wrap and gaps to apply correctly. space-x-* and space-y-* only add margin between children in one direction and do not combine well for both axes.

Practice

1. What does the Tailwind utility space-x-4 do when applied to a parent container with multiple child elements?

easy

A. It adds horizontal spacing of 1rem between each child element.

B. It adds vertical spacing of 1rem between each child element.

C. It adds padding of 1rem inside each child element.

D. It centers all child elements horizontally.

Solution

1. Step 1: Understand the space-x-4 utility

   This utility adds horizontal space (margin) between direct child elements of a flex container.

2. Step 2: Recognize the spacing size

   The number 4 corresponds to 1rem (16px by default) spacing between children horizontally.

3. Final Answer:

   It adds horizontal spacing of 1rem between each child element. -> Option A

4. Quick Check:

   space-x-4 = horizontal gap 1rem [OK]

Hint: Remember: space-x adds horizontal gaps between children [OK]

Common Mistakes:

• Confusing space-x with vertical spacing (space-y)
• Thinking it adds padding inside children
• Assuming it centers children

2. Which Tailwind utility correctly applies a different background color only to the first child element inside a parent container?

easy

A. child-1:bg-blue-500

B. first:bg-blue-500

C. bg-blue-500:first

D. parent:first-child:bg-blue-500

Solution

1. Step 1: Identify the correct pseudo-class utility

   Tailwind uses first: prefix to target the first child element.

2. Step 2: Confirm syntax correctness

   first:bg-blue-500 applies background color blue-500 only to the first child.

3. Final Answer:

   first:bg-blue-500 -> Option B

4. Quick Check:

   first: prefix targets first child [OK]

Hint: Use first: prefix to style only the first child [OK]

Common Mistakes:

• Using invalid utility names like child-1
• Placing pseudo-class after the utility
• Trying to style parent with child selectors

3. Given this HTML and Tailwind CSS:

<div class="flex space-x-6">
  <div class="p-4 bg-red-300">Box 1</div>
  <div class="p-4 bg-green-300">Box 2</div>
  <div class="p-4 bg-blue-300">Box 3</div>
</div>

What will be the horizontal space between Box 1 and Box 2?

medium

A. No space, boxes touch each other

B. 1rem (16px)

C. 2rem (32px)

D. 1.5rem (24px)

Solution

1. Step 1: Understand the space-x-6 utility

   This utility adds horizontal margin of size 6 between child elements in a flex container.

2. Step 2: Know the spacing scale

   In Tailwind, 6 corresponds to 1.5rem or 24px spacing.

3. Final Answer:

   1.5rem (24px) -> Option D

4. Quick Check:

   space-x-6 = 1.5rem horizontal gap [OK]

Hint: Tailwind spacing 6 = 1.5rem gap between children [OK]

Common Mistakes:

• Confusing spacing scale numbers with px values
• Assuming space-x adds padding inside children
• Ignoring that space-x only works on flex or grid parents

4. You want to add vertical spacing between child elements but accidentally use space-x-4 on a column flex container. What is the problem?

medium

A. No vertical spacing appears because space-x adds horizontal gaps only.

B. It causes a syntax error and the page breaks.

C. It adds vertical spacing but also breaks layout.

D. It adds horizontal spacing and vertical spacing both.

Solution

1. Step 1: Understand flex direction and space utilities

   In a column flex container, children stack vertically. space-x-4 adds horizontal gaps, which have no effect here.

2. Step 2: Identify correct utility for vertical spacing

   To add vertical spacing, space-y-4 should be used instead.

3. Final Answer:

   No vertical spacing appears because space-x adds horizontal gaps only. -> Option A

4. Quick Check:

   space-x only adds horizontal gaps [OK]

Hint: Use space-y for vertical gaps, space-x for horizontal [OK]

Common Mistakes:

• Expecting space-x to add vertical spacing
• Thinking it causes syntax errors
• Using space-x on non-flex containers

5. You want to style a list where the first child has a red border, the last child has a green border, and all other children have a blue border using Tailwind. Which combination of utilities correctly achieves this?

hard

A. first:border-red-500 last:border-green-500 border-blue-500

B. border-blue-500 first:border-red-500 last:border-green-500 !important

C. border-blue-500 first:border-red-500 last:border-green-500

D. border-blue-500 first-child:border-red-500 last-child:border-green-500

Solution

1. Step 1: Understand Tailwind's order of utility application

   Tailwind applies utilities in order. Base border color should come first, then overrides with first: and last:.

2. Step 2: Check syntax correctness

   first:border-red-500 and last:border-green-500 are correct pseudo-class prefixes. The base border-blue-500 applies to all children.

3. Step 3: Identify incorrect options

   first:border-red-500 last:border-green-500 border-blue-500 applies base border last, which overrides first/last styles. border-blue-500 first:border-red-500 last:border-green-500 !important uses invalid !important. border-blue-500 first-child:border-red-500 last-child:border-green-500 uses invalid selectors.

4. Final Answer:

   border-blue-500 first:border-red-500 last:border-green-500 -> Option C

5. Quick Check:

   Base first, then first:/last: overrides [OK]

Hint: Apply base styles first, then use first:/last: to override [OK]

Common Mistakes:

• Placing base border after first/last overrides
• Using invalid selectors like first-child:
• Trying to use !important in Tailwind classes