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.