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.