Why arbitrary values exist in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a custom margin using Tailwind's arbitrary value syntax.

Tailwind

<div class="m-[1]">Hello World</div>

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

A5

B[10px]

Clg

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain number without brackets for a custom pixel value.

Using a named size like 'lg' instead of an arbitrary value.

Arbitrary values in Tailwind are wrapped in square brackets, like [10px], to apply custom CSS values not in the default scale.

2fill in blank

medium

Complete the code to set a background color using an arbitrary hex value in Tailwind.

Tailwind

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

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

Ared-500

Bgreen-700

Cblue-300

D[#1a2b3c]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a named color instead of the custom hex code.

Not wrapping the hex code in square brackets.

Arbitrary colors in Tailwind are written inside square brackets, like [#1a2b3c], to use custom hex colors.

3fill in blank

hard

Fix the error in the Tailwind class to apply a custom width of 37rem using arbitrary values.

Tailwind

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

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

A[37rem]

B37rem

Cw-37rem

Dw-[37rem]

Attempts:

3 left

💡 Hint

Common Mistakes

Writing the value without brackets.

Including the 'w-' prefix inside the brackets.

Arbitrary values must be wrapped in square brackets without extra prefixes. So [37rem] is correct.

4fill in blank

hard

Fill both blanks to create a Tailwind class that sets padding to 12px and text color to a custom hex value.

Tailwind

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

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

A[12px]

B[#ff6600]

C500

Dred-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using default scale values instead of arbitrary values.

Not wrapping the hex color in brackets.

Use [12px] for custom padding and [#ff6600] for custom text color with arbitrary values.

5fill in blank

hard

Fill all three blanks to create a Tailwind class that sets margin to 8px, font size to 1.25rem, and border radius to 0.5rem using arbitrary values.

Tailwind

<div class="m-[1] text-[2] rounded-[3]">Styled Box</div>

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

A[8px]

B[1.25rem]

C[0.5rem]

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using default size names like 'lg' instead of arbitrary values.

Not wrapping values in square brackets.

All custom sizes use square brackets for arbitrary values: margin [8px], font size [1.25rem], border radius [0.5rem].