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].

Practice

1. Why do arbitrary values exist in Tailwind CSS?

easy

A. To allow using any custom CSS value beyond default Tailwind options

B. To restrict styling only to predefined Tailwind classes

C. To automatically generate animations

D. To replace JavaScript functionality

Solution

1. Step 1: Understand Tailwind's default options

   Tailwind provides many predefined classes but cannot cover every possible CSS value.

2. Step 2: Purpose of arbitrary values

   Arbitrary values let you write any CSS value inside square brackets to customize styles beyond defaults.

3. Final Answer:

   To allow using any custom CSS value beyond default Tailwind options -> Option A

4. Quick Check:

   Arbitrary values = custom CSS values [OK]

Hint: Think: Custom styles beyond presets use arbitrary values [OK]

Common Mistakes:

• Thinking arbitrary values limit styling
• Confusing arbitrary values with animations
• Believing arbitrary values replace JavaScript

2. Which of the following is the correct syntax to set a custom width of 450 pixels using Tailwind's arbitrary values?

easy

A. width-450

B. w-[450px]

C. w-450px

D. width-[450]

Solution

1. Step 1: Recall Tailwind arbitrary value syntax

   Arbitrary values use square brackets with the CSS value inside, e.g., w-[450px].

2. Step 2: Check each option

   Only w-[450px] uses square brackets and includes units correctly.

3. Final Answer:

   w-[450px] -> Option B

4. Quick Check:

   Correct syntax = w-[450px] [OK]

Hint: Remember: square brackets around full CSS value with units [OK]

Common Mistakes:

• Omitting square brackets
• Missing units like px
• Using dash instead of brackets

3. What will be the width of the div rendered by this code?

<div class="w-[30rem] bg-blue-500 text-white p-4">Hello</div>

medium

A. Default width with blue background

B. Width of 30px with blue background

C. Width of 30rem (about 480px) with blue background

D. Width of 30rem but no background color

Solution

1. Step 1: Interpret the class w-[30rem]

   This sets the width to exactly 30rem, which is about 480 pixels (1rem ≈ 16px).

2. Step 2: Check other classes

   bg-blue-500 sets a blue background, text-white sets white text, and p-4 adds padding.

3. Final Answer:

   Width of 30rem (about 480px) with blue background -> Option C

4. Quick Check:

   Arbitrary width 30rem + blue bg = Width of 30rem (about 480px) with blue background [OK]

Hint: Remember rem units scale with root font size (~16px) [OK]

Common Mistakes:

• Confusing rem with px
• Ignoring background color class
• Assuming default width

4. Identify the error in this Tailwind class usage:

<div class="h-[100] bg-red-400">Error</div>

medium

A. Missing units inside the arbitrary value brackets

B. Incorrect use of square brackets

C. bg-red-400 is not a valid Tailwind class

D. Height cannot be set with arbitrary values

Solution

1. Step 1: Check the arbitrary value syntax

   The height is set as h-[100] but lacks units like px or rem.

2. Step 2: Understand CSS requirements

   CSS requires units for length values unless it's zero; so 100 alone is invalid.

3. Final Answer:

   Missing units inside the arbitrary value brackets -> Option A

4. Quick Check:

   Units required inside brackets [OK]

Hint: Always include units like px or rem inside brackets [OK]

Common Mistakes:

• Forgetting units inside arbitrary values
• Thinking brackets are wrong syntax
• Assuming Tailwind classes are invalid

5. You want to create a button with a custom border radius of 12px and a padding of 1.25rem using Tailwind. Which class combination correctly uses arbitrary values to achieve this?

hard

A. rounded-12px p-1.25rem

B. rounded-12 p-1.25rem

C. rounded-[12] p-[1.25]

D. rounded-[12px] p-[1.25rem]

Solution

1. Step 1: Use square brackets for arbitrary values

   Custom values must be inside square brackets with units, e.g., rounded-[12px] and p-[1.25rem].

2. Step 2: Check each option

   Only rounded-[12px] p-[1.25rem] correctly uses brackets and includes units for both border radius and padding.

3. Final Answer:

   rounded-[12px] p-[1.25rem] -> Option D

4. Quick Check:

   Arbitrary values need brackets + units [OK]

Hint: Use brackets and units for all custom CSS values [OK]

Common Mistakes:

• Omitting brackets
• Leaving out units
• Mixing syntax without brackets