Bird
Raised Fist0
Tailwindmarkup~5 mins

Divide utilities between children in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Dividing utilities between children helps you control how space and styles apply to each child element inside a container. It makes your layout neat and organized.

You want to give equal space to each item inside a box.
You want to add different margins or padding to each child element.
You want to style only the first or last child differently.
You want to create a row or column layout where children share space evenly.
You want to add borders or backgrounds to specific children.
Syntax
Tailwind
parent-class > :child-selector { @apply utility-classes; }
Use :first-child, :last-child, or :nth-child(n) to target specific children.
Tailwind's @apply lets you add utility classes inside CSS for children.
Examples
Each child takes equal space in a row using flex-1.
Tailwind
<div class="flex">
  <div class="flex-1">Child 1</div>
  <div class="flex-1">Child 2</div>
  <div class="flex-1">Child 3</div>
</div>
Adds horizontal space between each child button.
Tailwind
<div class="space-x-4">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>
Styles first and last child differently using Tailwind inside CSS.
Tailwind
<style>
  .parent > :first-child {
    @apply text-red-500;
  }
  .parent > :last-child {
    @apply text-blue-500;
  }
</style>
<div class="parent">
  <p>First child</p>
  <p>Middle child</p>
  <p>Last child</p>
</div>
Sample Program

This example shows three children inside a flex container. Each child has a different background color and padding using Tailwind utilities applied to specific children.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Divide Utilities Between Children</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .container > :first-child {
      @apply bg-green-200 p-4;
    }
    .container > :nth-child(2) {
      @apply bg-yellow-200 p-4;
    }
    .container > :last-child {
      @apply bg-red-200 p-4;
    }
  </style>
</head>
<body class="flex justify-center items-center min-h-screen bg-gray-50">
  <div class="container flex space-x-4">
    <div>Child One</div>
    <div>Child Two</div>
    <div>Child Three</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use space-x-* or space-y-* utilities on the parent to add consistent spacing between children.

Target children with CSS selectors like :first-child or :nth-child(n) combined with @apply for custom styling.

Remember to use semantic HTML and keep your layout accessible by using proper roles and keyboard navigation if needed.

Summary

Dividing utilities between children helps control layout and style for each child element.

Use Tailwind's flex, spacing, and @apply with child selectors to style children differently.

This makes your design organized, responsive, and easy to maintain.

Practice

(1/5)
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