Arbitrary color values in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Using arbitrary color values in Tailwind CSS

Which of the following Tailwind CSS classes correctly applies a background color of #1a2b3c using an arbitrary color value?

A bg-[#1a2b3c]

B bg-#1a2b3c

C bg-[#1a2b3c]]

D bg-\#1a2b3c

💡 Hint

Remember that arbitrary values in Tailwind must be wrapped in square brackets without extra characters.

The correct syntax for arbitrary color values in Tailwind CSS is to wrap the value in square brackets immediately after the utility prefix. Option A uses bg-[#1a2b3c], which is valid. Option A misses the brackets, option A has an extra bracket, and option A escapes the hash incorrectly.

❓ rendering

intermediate

Visual result of arbitrary color value

What background color will the following Tailwind CSS class apply?
bg-[rgb(255,0,0)]

A Bright green background

B No background color applied

C Bright blue background

D Bright red background

💡 Hint

The rgb() function uses red, green, blue values in order.

The class bg-[rgb(255,0,0)] applies a background color with red at full intensity and green and blue at zero, resulting in a bright red background.

❓ selector

advanced

Selecting text color with opacity using arbitrary values

Which Tailwind CSS class correctly sets the text color to blue with 50% opacity using an arbitrary color value?

A text-[rgba(0,0,255,0.5)]

B text-[rgb(0,0,255,0.5)]

C text-[#0000ff80]

D text-opacity-50 text-blue-500

💡 Hint

RGBA color format includes red, green, blue, and alpha (opacity).

Option A uses the correct rgba() syntax with alpha 0.5 inside square brackets for arbitrary color. Option A uses rgb() with four values, which is invalid. Option A tries to use hex with opacity but is not valid in Tailwind arbitrary values. Option A uses separate opacity utility, not an arbitrary color value.

❓ layout

advanced

Combining arbitrary colors with layout utilities

You want a container with a background color of #ffcc00 and padding of 1rem using Tailwind CSS. Which class combination is correct?

A bg-[#ffcc00] padding-1rem

B bg-[#ffcc00] p-4

C bg-[#ffcc00] padding-4

D bg-#ffcc00 p-1

💡 Hint

Padding 1rem corresponds to Tailwind's p-4 by default (1rem = 16px, p-4 = 1rem).

Option B correctly uses the arbitrary color syntax and the padding utility p-4 which equals 1rem. Option B misses brackets and uses wrong padding. Options A and C use invalid padding class names.

❓ accessibility

expert

Ensuring accessible contrast with arbitrary background colors

You apply an arbitrary background color bg-[#123456] to a button. Which text color class ensures the best accessibility by providing sufficient contrast?

A text-black

B text-[#123456]

C text-white

D text-gray-500

💡 Hint

Dark backgrounds usually need light text for good contrast.

The background color #123456 is a dark blue shade. White text (text-white) provides the best contrast and accessibility. Black or gray text would be hard to read. Using the same color as background for text causes no contrast.