Border color and style in Tailwind - Mini Project: Build & Apply

Border color and style

📖 Scenario: You are creating a simple card component for a website. The card should have a visible border with a specific color and style to make it stand out.

🎯 Goal: Build a card using Tailwind CSS that has a red border with a dashed style.

📋 What You'll Learn

Create a div element with the class card.

Add a red border to the card using Tailwind CSS classes.

Make the border style dashed using Tailwind CSS classes.

Ensure the card has some padding and margin for spacing.

💡 Why This Matters

🌍 Real World

Borders help separate content visually on websites. Using colors and styles makes elements stand out or look subtle depending on design needs.

💼 Career

Knowing how to style borders with Tailwind CSS is useful for front-end developers to create visually appealing and accessible user interfaces quickly.

1

Create the card container

Create a div element with the class card inside the body tag.

Tailwind

    
    
    Border Color and Style
    


    

Hint

Use a div tag and add class="card" inside the body.

2

Add red border color

Add the Tailwind CSS class border-red-500 to the div with class card to set the border color to red.

Tailwind

    
    
    Border Color and Style
    


    
        
    

Hint

Add border-red-500 to the existing class attribute.

3

Add dashed border style

Add the Tailwind CSS class border-dashed to the div with class card border-red-500 to make the border dashed.

Tailwind

    
    
    Border Color and Style
    


    
        
    

Hint

Add border-dashed to the existing class attribute.

4

Add padding and margin for spacing

Add the Tailwind CSS classes p-4 for padding and m-4 for margin to the div with class card border-red-500 border-dashed.

Tailwind

    
    
    Border Color and Style
    


    
        
    

Hint

Add p-4 and m-4 to the existing class attribute for spacing.

Practice

1. Which Tailwind class sets the border color to red?

easy

A. border-red-500

B. border-color-red

C. red-border

D. border-red

Solution

1. Step 1: Understand Tailwind color naming

   Tailwind uses color names followed by a number for shade, like red-500.

2. Step 2: Identify correct border color class

   The correct format for border color is border-{color}-{shade}, so border-red-500 is correct.

3. Final Answer:

   border-red-500 -> Option A

4. Quick Check:

   Border color uses border-{color}-{shade} format [OK]

Hint: Use border-color-shade format for colors [OK]

Common Mistakes:

• Using border-color-red which is invalid
• Using just border-red without shade
• Using non-Tailwind class names

2. Which class correctly applies a dashed border style in Tailwind?

easy

A. border-dash

B. border-dashed

C. border-style-dashed

D. dashed-border

Solution

1. Step 1: Recall Tailwind border style classes

   Tailwind uses border-solid, border-dashed, border-dotted for border styles.

2. Step 2: Match correct class

   border-dashed is the correct class to apply dashed border style.

3. Final Answer:

   border-dashed -> Option B

4. Quick Check:

   Border style classes start with border- + style [OK]

Hint: Border styles use border- + style name [OK]

Common Mistakes:

• Using border-dash which is not valid
• Adding extra words like border-style-dashed
• Using non-Tailwind class names

3. What border style and color will this div have?

<div class="border-4 border-blue-700 border-dotted">Content</div>

medium

A. No border visible

B. A thin blue solid border

C. A thick (4px) blue dotted border

D. A thick red dashed border

Solution

1. Step 1: Analyze border width class

   border-4 means border width is 4 pixels, which is thick.

2. Step 2: Analyze border color and style

   border-blue-700 sets a dark blue color, and border-dotted sets dotted style.

3. Final Answer:

   A thick (4px) blue dotted border -> Option C

4. Quick Check:

   Width 4 + blue-700 + dotted = thick blue dotted border [OK]

Hint: Combine width, color, style classes for full border look [OK]

Common Mistakes:

• Ignoring border width and assuming thin border
• Confusing dotted with dashed style
• Mixing up color shades

4. Identify the error in this Tailwind border class usage:

<div class="border-2 border-green border-solid">Box</div>

medium

A. Wrong border style class name

B. Incorrect border width class

C. No error, all classes are correct

D. Missing shade number in border color class

Solution

1. Step 1: Check border color class format

   border-green is incomplete; Tailwind requires a shade like border-green-500.

2. Step 2: Verify other classes

   border-2 and border-solid are valid classes.

3. Final Answer:

   Missing shade number in border color class -> Option D

4. Quick Check:

   Border color needs shade number like -500 [OK]

Hint: Always add shade number to color classes [OK]

Common Mistakes:

• Omitting shade number in color class
• Using invalid style class names
• Confusing border width units

5. You want a responsive border that is solid red on small screens and dashed blue on medium and larger screens. Which class combination achieves this?

hard

A. border border-red-600 border-solid md:border-blue-600 md:border-dashed

B. border border-red-600 border-dashed md:border-blue-600 md:border-solid

C. border border-blue-600 border-solid md:border-red-600 md:border-dashed

D. border border-red-600 md:border-blue-600 border-dashed md:border-solid

Solution

1. Step 1: Set default small screen styles

   Use border-red-600 and border-solid for small screens (default).

2. Step 2: Override on medium screens and up

   Use md:border-blue-600 and md:border-dashed to change color and style on medium+ screens.

3. Final Answer:

   border border-red-600 border-solid md:border-blue-600 md:border-dashed -> Option A

4. Quick Check:

   Default solid red, medium+ dashed blue with md: prefix [OK]

Hint: Use md: prefix to change styles on medium screens [OK]

Common Mistakes:

• Mixing up default and responsive classes order
• Using wrong style classes for screen sizes
• Forgetting to include base border class