Arbitrary color values in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

<div class="bg-[[1]] p-4 text-white">Hello World</div>

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

Atext-white

Bred-500

C#ff5733

Dbg-red

Attempts:

3 left

💡 Hint

Common Mistakes

Using a Tailwind color name without brackets for arbitrary colors.

Forgetting the '#' in the hex color.

Using text color classes instead of background color.

In Tailwind CSS, arbitrary colors are written inside square brackets with the exact color value, like bg-[#ff5733].

2fill in blank

medium

Complete the code to set the text color to an arbitrary RGB value using Tailwind CSS.

Tailwind

<p class="text-[[1]]">Colored Text</p>

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

Argb(255,0,0)

Bred-600

C#ff0000

Dtext-red

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tailwind color names instead of arbitrary values.

Missing parentheses in rgb function.

Not using square brackets around the color.

Arbitrary colors in Tailwind can use any valid CSS color format inside square brackets, like text-[rgb(255,0,0)].

3fill in blank

hard

Fix the error in the code to correctly apply an arbitrary background color with opacity in Tailwind CSS.

Tailwind

<div class="bg-[[1]]/50 p-4">Transparent Background</div>

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

Abg-black

Brgba(0,0,0,0.5)

Cblack

D#000000

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'bg-' inside the brackets.

Using rgba() inside brackets with opacity suffix.

Not using brackets for arbitrary colors.

To use opacity with arbitrary colors in Tailwind, write the color inside brackets without the opacity, then add /50 for 50% opacity, like bg-[#000000]/50.

4fill in blank

hard

Fill both blanks to set a border color and hover background color using arbitrary colors in Tailwind CSS.

Tailwind

<button class="border-2 border-[[1]] hover:bg-[[2]] p-2 rounded">Click me</button>

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

A#4caf50

Bblue-500

C#2196f3

Dred-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tailwind color names without brackets.

Mixing color formats between blanks.

Forgetting the hover: prefix for the background color.

The border color uses an arbitrary hex color border-[#4caf50], and the hover background uses another arbitrary hex color hover:bg-[#2196f3].

5fill in blank

hard

Fill all three blanks to create a text shadow with an arbitrary color and set the background color using Tailwind CSS.

Tailwind

<div class="text-[[3]] text-shadow-[0_2px_4px_[1]] bg-[[2]] p-6">Shadowed Text</div>

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

Argba(0,0,0,0.25)

B#f0f0f0

C#333333

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Not using underscores instead of spaces in text-shadow values.

Using named colors instead of hex or rgba for arbitrary values.

Forgetting to wrap colors in square brackets.

The text shadow color uses an arbitrary rgba color text-shadow-[0_2px_4px_rgba(0,0,0,0.25)], the background uses an arbitrary hex color bg-[#f0f0f0], and the text color uses an arbitrary hex color text-[#333333].

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