Space between children (space-x, space-y) in Tailwind - Mini Project: Build & Apply

Create a Vertical List with Space Between Items Using Tailwind CSS

📖 Scenario: You are building a simple vertical list of items for a website. You want to add equal space between each item so the list looks neat and easy to read.

🎯 Goal: Build an HTML list where each item has vertical space between them using Tailwind CSS's space-y utility.

📋 What You'll Learn

Use a <ul> element with three <li> children

Add Tailwind CSS class space-y-4 to the <ul> to create vertical spacing

Each list item should contain the text: Item 1, Item 2, and Item 3 respectively

Use semantic HTML and ensure the list is accessible

💡 Why This Matters

🌍 Real World

Adding consistent spacing between elements is a common need in web design to improve readability and visual appeal.

💼 Career

Understanding how to use utility-first CSS frameworks like Tailwind CSS to control layout and spacing is valuable for front-end web development roles.

1

Create the HTML list structure

Create a <ul> element with three <li> children. The first <li> should have the text Item 1, the second Item 2, and the third Item 3.

Tailwind

  Item 1
  Item 2
  Item 3

Need a hint?

Use <ul> for the list and add three <li> elements inside it with the exact texts.

2

Add Tailwind CSS class for vertical spacing

Add the Tailwind CSS class space-y-4 to the <ul> element to create vertical space between the list items.

Tailwind

  Item 1
  Item 2
  Item 3

Need a hint?

Add the class space-y-4 inside the class attribute of the <ul> tag.

3

Add a container with padding around the list

Wrap the <ul> element inside a <div> with the Tailwind CSS class p-6 to add padding around the list.

Tailwind

  
    Item 1
    Item 2
    Item 3
  

Need a hint?

Use a <div> with class p-6 to add padding around the list.

4

Add a heading above the list

Add a <h2> heading with the text My List above the <ul> inside the <div>. Add the Tailwind CSS classes text-xl and font-semibold to the heading for styling.

Tailwind

  My List
  
    Item 1
    Item 2
    Item 3
  

Need a hint?

Add a heading with the exact text and classes above the list inside the container.