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