Border width utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a border width of 2 pixels to the div.

Tailwind

<div class="border-[1]">Content</div>

Drag options to blanks, or click blank then click option'

A4

B2

C8

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-4 which sets border width to 4 pixels instead of 2.

Using border without a number, which sets default 1 pixel border.

The class border-2 sets the border width to 2 pixels.

2fill in blank

medium

Complete the code to remove the border from the button.

Tailwind

<button class="border-[1]">Click me</button>

Drag options to blanks, or click blank then click option'

A0

B4

C2

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-none which is not a valid Tailwind border width class.

Using border which adds a 1 pixel border instead of removing it.

The class border-0 removes the border by setting its width to zero.

3fill in blank

hard

Fix the error in the code to correctly set a border width of 8 pixels.

Tailwind

<div class="border-[1]">Box</div>

Drag options to blanks, or click blank then click option'

A6

B10

C8

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-6 which is not a valid Tailwind border width.

Using border-10 which is not supported by default.

The correct Tailwind class for 8 pixels border width is border-8.

4fill in blank

hard

Fill both blanks to create a div with a 4 pixel border and no border on the top.

Tailwind

<div class="border-[1] border-t-[2]">Content</div>

Drag options to blanks, or click blank then click option'

A4

B0

C2

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-t-4 which keeps the top border instead of removing it.

Using border-0 which removes all borders.

border-4 sets all borders to 4 pixels, and border-t-0 removes the top border.

5fill in blank

hard

Fill all three blanks to create a button with a 2 pixel border, no left border, and an 8 pixel right border.

Tailwind

<button class="border-[1] border-l-[2] border-r-[3]">Press</button>

Drag options to blanks, or click blank then click option'

A4

B0

C8

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using border-l-2 which keeps the left border instead of removing it.

Using border-r-4 which sets the right border to 4 pixels instead of 8.

border-2 sets all borders to 2 pixels, border-l-0 removes the left border, and border-r-8 sets the right border to 8 pixels.

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)