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.

Practice

1. What is the purpose of using arbitrary color values in Tailwind CSS?
bg-[#ff5733]

easy

A. To create animations with colors

B. To use any custom color not in Tailwind's default palette

C. To add shadows to elements

D. To change font sizes dynamically

Solution

1. Step 1: Understand Tailwind's default colors

   Tailwind provides a set of default colors but sometimes you need a specific shade not included.

2. Step 2: Use arbitrary color values

   By writing colors inside square brackets like bg-[#ff5733], you can use any valid CSS color.

3. Final Answer:

   To use any custom color not in Tailwind's default palette -> Option B

4. Quick Check:

   Arbitrary colors = custom colors [OK]

Hint: Square brackets let you add any color code directly [OK]

Common Mistakes:

• Thinking arbitrary colors create animations
• Confusing color usage with font size changes
• Using arbitrary colors for shadows instead of colors

2. Which of the following is the correct syntax to set a background color to a semi-transparent red using arbitrary values in Tailwind CSS?

easy

A. bg-[rgba(255,0,0,0.5)]

B. bg-rgba(255,0,0,0.5)

C. bg-[rgb(255,0,0,0.5)]

D. bg-(rgba(255,0,0,0.5))

Solution

1. Step 1: Check the correct use of square brackets

   Arbitrary values must be inside square brackets exactly, so bg-[...] is correct.

2. Step 2: Validate the color function syntax

   The color function rgba(255,0,0,0.5) is valid CSS and correctly placed inside brackets.

3. Final Answer:

   bg-[rgba(255,0,0,0.5)] -> Option A

4. Quick Check:

   Correct brackets + valid rgba = bg-[rgba(255,0,0,0.5)] [OK]

Hint: Always wrap color values in square brackets for arbitrary colors [OK]

Common Mistakes:

• Omitting square brackets
• Using parentheses instead of brackets
• Using rgb instead of rgba for transparency

3. What color will the text be if you use this Tailwind class?
text-[hsl(120,100%,50%)]

medium

A. Bright green

B. Bright red

C. Bright blue

D. Bright yellow

Solution

1. Step 1: Understand HSL color values

   HSL stands for hue, saturation, and lightness. Hue 120° corresponds to green.

2. Step 2: Analyze saturation and lightness

   100% saturation and 50% lightness means the color is bright and fully saturated green.

3. Final Answer:

   Bright green -> Option A

4. Quick Check:

   Hue 120° = green [OK]

Hint: Hue 120° in HSL means green color [OK]

Common Mistakes:

• Confusing hue degrees with other colors
• Ignoring saturation and lightness effects
• Assuming default Tailwind colors instead of arbitrary

4. Identify the error in this Tailwind class:
bg-[#12345G]

medium

A. Missing square brackets

B. Wrong prefix, should be 'background-'

C. Invalid hex color code due to 'G'

D. Hex code too short

Solution

1. Step 1: Check hex color validity

   Hex colors only allow digits 0-9 and letters A-F (case-insensitive). 'G' is invalid.

2. Step 2: Confirm brackets and prefix

   Square brackets and prefix bg- are correct here.

3. Final Answer:

   Invalid hex color code due to 'G' -> Option C

4. Quick Check:

   Hex digits must be 0-9 or A-F [OK]

Hint: Hex colors only use 0-9 and A-F letters [OK]

Common Mistakes:

• Ignoring invalid hex characters
• Thinking brackets are missing
• Confusing prefix names

5. You want a button with a background color that changes based on light or dark mode using arbitrary colors. Which Tailwind class combination is correct?

hard

A. bg-[rgb(255,255,255)] dark:bg-[rgb(300,300,300)]

B. bg-[rgb(255,255,255)] bg-dark:[rgb(30,30,30)]

C. bg-[rgb(255,255,255)] dark:bg(rgb(30,30,30))

D. bg-[rgb(255,255,255)] dark:bg-[rgb(30,30,30)]

Solution

1. Step 1: Use correct dark mode prefix

   Tailwind uses dark: prefix to apply styles in dark mode.

2. Step 2: Use correct arbitrary color syntax

   Colors must be inside square brackets with valid CSS color values.

3. Step 3: Validate color values

   RGB values must be between 0 and 255; bg-[rgb(255,255,255)] dark:bg-[rgb(300,300,300)] has invalid 300 values.

4. Final Answer:

   bg-[rgb(255,255,255)] dark:bg-[rgb(30,30,30)] -> Option D

5. Quick Check:

   Correct dark: prefix + valid colors = bg-[rgb(255,255,255)] dark:bg-[rgb(30,30,30)] [OK]

Hint: Use dark: prefix and brackets for dark mode colors [OK]

Common Mistakes:

• Using wrong dark mode prefix syntax
• Omitting square brackets for arbitrary colors
• Using invalid RGB values above 255