Why arbitrary values exist in Tailwind - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use arbitrary values in Tailwind CSS?

Which of the following best explains why Tailwind CSS supports arbitrary values like bg-[#123abc] or p-[10px]?

A To automatically generate random colors and sizes for elements.

B To force all styles to use only the default Tailwind scale without exceptions.

C To allow developers to use custom values not predefined in Tailwind's default scale, enabling more precise styling.

D To disable responsive design features in Tailwind CSS.

💡 Hint

Think about why sometimes you need a size or color that Tailwind doesn't have by default.

Arbitrary values let you write exact CSS values inside Tailwind classes. This helps when the default scale doesn't have what you want, so you can still use Tailwind's utility system with custom values.

📝 Syntax

intermediate

Correct syntax for arbitrary values in Tailwind

Which Tailwind CSS class correctly applies a margin of exactly 7 pixels using arbitrary values?

A m-[7px]

B m-7px

C m-{7px}

D m-(7px)

💡 Hint

Arbitrary values use square brackets around the exact CSS value.

Arbitrary values in Tailwind must be wrapped in square brackets with no spaces, like m-[7px]. Other forms are invalid syntax.

❓ rendering

advanced

Visual result of using an arbitrary color value

What background color will the following Tailwind class produce?
bg-[#ff4500]

A A syntax error, so no background color

B A transparent background

C A default Tailwind red background

D A bright orange-red background color

💡 Hint

The hex code #ff4500 is a known bright orange-red color.

The class bg-[#ff4500] sets the background color exactly to the hex color #ff4500, which is a bright orange-red shade.

❓ selector

advanced

Using arbitrary values with pseudo-classes

Which Tailwind class correctly applies a 3rem padding only on hover using arbitrary values?

A hover-[p-3rem]

B hover:p-[3rem]

C p-hover-[3rem]

D p-[hover:3rem]

💡 Hint

Pseudo-classes come before the utility name in Tailwind.

In Tailwind, pseudo-classes like hover: prefix the utility class. So hover:p-[3rem] applies 3rem padding on hover.

❓ accessibility

expert

Accessibility considerations when using arbitrary color values

When using arbitrary background colors like bg-[#123456] in Tailwind, what should you always check to ensure good accessibility?

A That the text color has enough contrast with the background color for readability.

B That the background color matches the default Tailwind palette exactly.

C That the background color changes automatically on hover.

D That the arbitrary value uses only named CSS colors, not hex codes.

💡 Hint

Good contrast helps people with vision difficulties read text easily.

Using arbitrary colors can cause poor contrast with text. Always check contrast ratios to keep text readable and accessible for all users.