Divide utilities between children in Tailwind - Mini Project: Build & Apply

Divide utilities between children using Tailwind CSS

📖 Scenario: You are creating a simple webpage section where you want to divide space evenly between child boxes inside a container. This is common when you want to show multiple items side by side with equal width.

🎯 Goal: Build a container with three child boxes that share the container's width equally using Tailwind CSS utilities.

📋 What You'll Learn

Use a container <div> with Tailwind CSS classes

Add exactly three child <div> elements inside the container

Use Tailwind CSS utilities to divide the container's width equally among the three children

Each child should have a visible border and some padding for clarity

The layout should be responsive and maintain equal widths on different screen sizes

💡 Why This Matters

🌍 Real World

Dividing space evenly between child elements is common in navigation bars, product listings, and dashboard widgets.

💼 Career

Understanding how to use Tailwind CSS flex utilities to create responsive layouts is a valuable skill for frontend web developers.

1

Create the container and three child boxes

Write HTML code to create a <div> container with three child <div> elements inside it. Each child should contain the text Box 1, Box 2, and Box 3 respectively.

Tailwind

  Box 1
  Box 2
  Box 3

Need a hint?

Start by writing a container <div> and add three child <div> elements with the exact texts.

2

Add Tailwind CSS classes to the container for flex layout

Add Tailwind CSS classes flex and border to the container <div> to make it a flex container with a visible border.

Tailwind

  Box 1
  Box 2
  Box 3

Need a hint?

Add class="flex border" to the container <div> to enable flex layout and show a border around the container.

3

Add Tailwind CSS classes to children to divide space equally

Add the Tailwind CSS class flex-1 to each of the three child <div> elements to make them share the container's width equally.

Tailwind

  Box 1
  Box 2
  Box 3

Need a hint?

Add class="flex-1" to each child <div> so they take equal width inside the flex container.

4

Add padding and border to children for clarity

Add Tailwind CSS classes p-4 and border to each child <div> to add padding and a visible border around each box.

Tailwind

  Box 1
  Box 2
  Box 3

Need a hint?

Add p-4 for padding and border for visible edges on each child box.