Square bracket notation for custom values in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a custom width of 72 pixels using Tailwind's square bracket notation.

Tailwind

<div class="w-[1] bg-blue-500 text-white p-4">Custom width box</div>

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

Awidth-72

B72

Cw-72

D[72px]

Attempts:

3 left

💡 Hint

Common Mistakes

Using just '72' without brackets and units.

Using 'w-72' which is a predefined size, not custom.

Using 'width-72' which is not valid Tailwind syntax.

Tailwind uses square bracket notation like w-[72px] to apply custom widths not in the default scale.

2fill in blank

medium

Complete the code to set a custom background color of #123abc using Tailwind's square bracket notation.

Tailwind

<div class="bg-[1] text-white p-4">Custom color box</div>

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

A123abc

B[#123abc]

Cbg-123abc

Dcolor-#123abc

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the hash symbol (#).

Not using square brackets around the color code.

Using 'bg-123abc' which Tailwind does not recognize as a custom color.

Tailwind allows custom colors using square brackets with the full hex code inside.

3fill in blank

hard

Fix the error in the code to apply a custom margin of 15 pixels using Tailwind's square bracket notation.

Tailwind

<div class="m-[1] p-2">Margin box</div>

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

A[15px]

B[15]

Cm-15px

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Using '15' without units or brackets.

Using '[15]' without units.

Using 'm-15px' which is not valid Tailwind syntax.

Custom values must include units and be wrapped in square brackets, like m-[15px].

4fill in blank

hard

Fill both blanks to set a custom padding of 10 pixels and a custom font size of 18 pixels using Tailwind's square bracket notation.

Tailwind

<p class="p-[1] text-[2]">Custom padded text</p>

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

A[10px]

B[18px]

C18px

D10px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting square brackets.

Leaving out units like 'px'.

Using plain numbers without brackets.

Use square brackets with units for both padding and font size: p-[10px] and text-[18px].

5fill in blank

hard

Fill all three blanks to create a div with a custom width of 100 pixels, height of 50 pixels, and background color #ff6600 using Tailwind's square bracket notation.

Tailwind

<div class="w-[1] h-[2] bg-[3]">Custom box</div>

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

A[100px]

B[50px]

C[#ff6600]

D100px

Attempts:

3 left

💡 Hint

Common Mistakes

Not using square brackets.

Omitting units for width and height.

Leaving out the hash symbol for the color.

Use square brackets with units or hex code for width, height, and background color: w-[100px], h-[50px], bg-[#ff6600].