Border width utilities in Tailwind - Mini Project: Build & Apply

Border Width Utilities with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that shows three colored boxes. Each box has a border with a different thickness. This helps users see how border widths change the look of elements.

🎯 Goal: Build a webpage with three boxes side by side. Each box uses Tailwind CSS border width utilities: border (default 1px), border-2 (2px), and border-4 (4px). The boxes have distinct background colors and visible borders.

📋 What You'll Learn

Use Tailwind CSS border width utilities: border, border-2, border-4

Create three boxes with different border thicknesses

Use semantic HTML with a section and article elements

Make boxes horizontally aligned using Flexbox

Add accessible text inside each box describing the border width

💡 Why This Matters

🌍 Real World

Web designers often need to control border thickness to create visually appealing layouts and highlight elements clearly.

💼 Career

Knowing how to use Tailwind CSS border utilities helps frontend developers quickly style components with consistent borders and improve UI clarity.

1

Create the HTML structure with three boxes

Create a section element with class flex. Inside it, create three article elements. Each article should have a p tag with the texts: "Box 1", "Box 2", and "Box 3" respectively.

Tailwind

Need a hint?

Use a section with class flex to arrange boxes horizontally. Add three article elements each with a p tag for the box label.

2

Add background colors and padding to boxes

Add Tailwind classes to each article to give them background colors and padding. Use bg-red-200 p-4 for the first, bg-green-200 p-4 for the second, and bg-blue-200 p-4 for the third.

Tailwind

  
    Box 1
  
  
    Box 2
  
  
    Box 3
  

Need a hint?

Use Tailwind classes for background colors and padding on each article.

3

Add border width utilities to each box

Add Tailwind border width classes to each article. Use border for the first box, border-2 for the second box, and border-4 for the third box. Also add border-black to make borders black.

Tailwind

  
    Box 1
  
  
    Box 2
  
  
    Box 3
  

Need a hint?

Add border width classes border, border-2, and border-4 plus border-black to each box.

4

Make boxes spaced and add accessible labels

Add Tailwind class gap-4 to the section to space boxes. Add aria-label attributes to each article describing the border thickness: "Box with 1px border", "Box with 2px border", and "Box with 4px border" respectively.

Tailwind

  
    Box 1
  
  
    Box 2
  
  
    Box 3
  

Need a hint?

Add gap-4 to the section for spacing. Add descriptive aria-label attributes to each article for accessibility.