Gap between flex children in Tailwind - Mini Project: Build & Apply

Add Gap Between Flex Children Using Tailwind CSS

📖 Scenario: You are building a simple horizontal navigation bar with three buttons. You want to add space between each button so they don't stick together.

🎯 Goal: Create a flex container with three buttons inside. Use Tailwind CSS to add a gap of 1.5rem (24px) between the buttons.

📋 What You'll Learn

Use a <div> as a flex container

Add exactly three <button> elements inside the container

Use Tailwind CSS classes to make the container a flexbox

Add a gap of 6 (1.5rem) between the flex children using Tailwind's gap utilities

Ensure the buttons have visible text: 'Home', 'About', and 'Contact'

💡 Why This Matters

🌍 Real World

Adding gaps between items in a navigation bar or any flex container is common in web design to improve readability and user experience.

💼 Career

Understanding how to use Tailwind CSS flexbox and gap utilities is important for front-end developers to build clean, responsive layouts quickly.

1

Create the flex container with three buttons

Write HTML code to create a <div> with three <button> elements inside it. The buttons should have the texts Home, About, and Contact. Do not add any Tailwind classes yet.

Tailwind

  Home
  About
  Contact

Need a hint?

Start by writing a <div> container with three buttons inside. Don't add any classes yet.

2

Make the container a flexbox

Add the Tailwind CSS class flex to the <div> container to make it a flexbox container.

Tailwind

  Home
  About
  Contact

Need a hint?

Add class="flex" inside the opening <div> tag.

3

Add gap between flex children

Add the Tailwind CSS class gap-6 to the <div> container to create a gap of 1.5rem (24px) between the buttons.

Tailwind

  Home
  About
  Contact

Need a hint?

Add gap-6 alongside flex in the class attribute.

4

Add accessible labels and responsive design

Add the attribute aria-label="Main navigation buttons" to the <div> container for accessibility. Also, add the Tailwind class p-4 to add padding around the container for better spacing on all screen sizes.

Tailwind

  Home
  About
  Contact

Need a hint?

Add aria-label="Main navigation buttons" inside the <div> tag. Also add p-4 to the class list.