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

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
  

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
  

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
  

Hint

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

Practice

1. Which Tailwind class sets the border width to 4 pixels on all sides?

easy

A. border-thick

B. border-4

C. border-all-4

D. border-width-4

Solution

1. Step 1: Understand Tailwind border width classes

   Tailwind uses border-{size} to set border width on all sides.

2. Step 2: Identify the correct class for 4 pixels

   The class border-4 sets border width to 4 pixels on all sides.

3. Final Answer:

   border-4 -> Option B

4. Quick Check:

   border width 4px = border-4 [OK]

Hint: Use border-{number} for all sides border width [OK]

Common Mistakes:

• Using non-existent classes like border-width-4
• Confusing border thickness with border style
• Forgetting to add border color to see the border

2. Which of these is the correct Tailwind class to set only the top border width to 2 pixels?

easy

A. border-top-2

B. border-2t

C. border-2-top

D. border-t-2

Solution

1. Step 1: Recall Tailwind side-specific border width syntax

   Tailwind uses border-{side}-{width} with short side names: t (top), r (right), b (bottom), l (left).

2. Step 2: Match the correct class for top border 2 pixels

   border-t-2 correctly sets top border width to 2 pixels.

3. Final Answer:

   border-t-2 -> Option D

4. Quick Check:

   Top border 2px = border-t-2 [OK]

Hint: Use border-t-2 for top border width 2px [OK]

Common Mistakes:

• Writing full words like border-top-2 (not valid)
• Mixing order like border-2-top
• Using incorrect abbreviations like border-2t

3. What border width will the following Tailwind class apply?
<div class="border-l-8 border-r-2 border-t border-b-0 border-black border-solid">Content</div>

medium

A. Left: 8px, Right: 2px, Top: 1px, Bottom: 0px

B. Left: 8px, Right: 2px, Top: 0px, Bottom: 1px

C. Left: 2px, Right: 8px, Top: 1px, Bottom: 0px

D. Left: 8px, Right: 2px, Top: 2px, Bottom: 0px

Solution

1. Step 1: Analyze each border width class

   border-l-8 sets left border 8px, border-r-2 right border 2px, border-t defaults to 1px, border-b-0 bottom border 0px.

2. Step 2: Confirm border color and style

   border-black and border-solid ensure border is visible with black solid lines.

3. Final Answer:

   Left: 8px, Right: 2px, Top: 1px, Bottom: 0px -> Option A

4. Quick Check:

   border-l-8, border-r-2, border-t=1, border-b-0 [OK]

Hint: Remember border-t means 1px by default [OK]

Common Mistakes:

• Assuming border-t means 0px
• Mixing left and right widths
• Ignoring border style or color needed to see border

4. You wrote <div class="border-t-3 border-b-5 border-black">Box</div> but the top border does not appear. What is the likely problem?

medium

A. You need to add border-color for bottom border only

B. border-t-3 is not a valid Tailwind class

C. You must add border-style like border-solid to see borders

D. The border-b-5 class overrides the top border

Solution

1. Step 1: Check if border style is set

   Tailwind border width classes only set width. Without a border style like border-solid, borders won't show.

2. Step 2: Confirm border color is set

   border-black sets color, so color is not the issue here.

3. Final Answer:

   You must add border-style like border-solid to see borders -> Option C

4. Quick Check:

   Border style missing = no visible border [OK]

Hint: Always add border style like border-solid to show borders [OK]

Common Mistakes:

• Assuming border width alone shows border
• Thinking border-t-3 is invalid (it is valid)
• Believing one border side overrides another

5. You want a responsive border that is 1px on small screens, 4px on medium, and 8px on large screens only on the bottom side. Which Tailwind class set is correct?

hard

A. border-b border-b-1 md:border-b-4 lg:border-b-8

B. border-b-1 sm:border-b-4 md:border-b-8

C. border-b border-b-4 md:border-b-4 lg:border-b-8

D. border-b border-b-1 sm:border-b-4 lg:border-b-8

Solution

1. Step 1: Understand default and responsive classes

   Use border-b-1 for 1px bottom border by default (small screens). Then md:border-b-4 for medium screens, lg:border-b-8 for large screens.

2. Step 2: Check for correct syntax and order

   border-b border-b-1 md:border-b-4 lg:border-b-8 correctly uses border-b-1 (default), md:border-b-4, and lg:border-b-8. The border-b class alone sets 1px but is redundant with border-b-1.

3. Final Answer:

   border-b border-b-1 md:border-b-4 lg:border-b-8 -> Option A

4. Quick Check:

   Responsive bottom border widths set correctly [OK]

Hint: Use mobile-first classes with md: and lg: prefixes [OK]

Common Mistakes:

• Using sm: instead of md: for medium screens
• Missing the default border width class
• Using invalid class names like border-b-1 (valid but redundant with border-b)