Default color palette and shades in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply the default blue color shade 500 as background.

Tailwind

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

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

Ablue-500

Bred-500

Cgreen-500

Dyellow-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name without shade like 'blue' only.

Using a shade number not in the palette like 'blue-600'.

Mixing color and shade order incorrectly.

The class bg-blue-500 sets the background color to the default blue shade 500 in Tailwind CSS.

2fill in blank

medium

Complete the code to set the text color to the default red shade 700.

Tailwind

<p class="text-[1]">Warning message</p>

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

Ared-500

Bred-900

Cred-300

Dred-700

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a lighter shade like 300 instead of 700.

Using background color classes instead of text color.

The class text-red-700 sets the text color to a darker red shade 700 from Tailwind's default palette.

3fill in blank

hard

Fix the error in the code to correctly apply the green shade 400 as border color.

Tailwind

<div class="border-2 border-[1] p-2">Green border</div>

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

Agreen-400

Bgreen-800

Cgreen-200

Dgreen-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using a shade too dark or too light for the intended style.

Omitting the shade number.

The class border-green-400 sets the border color to the green shade 400 from Tailwind's default palette.

4fill in blank

hard

Fill both blanks to create a button with yellow background shade 300 and text shade 900.

Tailwind

<button class="bg-[1] text-[2] px-4 py-2 rounded">Click me</button>

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

Ayellow-300

Byellow-500

Cyellow-900

Dyellow-700

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping background and text color shades.

Using the same shade for both background and text causing poor contrast.

The class bg-yellow-300 sets a light yellow background, and text-yellow-900 sets a dark yellow text color for good contrast.

5fill in blank

hard

Fill all three blanks to create a card with gray background shade 100, border shade 300, and text shade 800.

Tailwind

<div class="bg-[1] border border-[2] text-[3] p-6 rounded-lg">Card content</div>

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

Agray-100

Bgray-300

Cgray-800

Dgray-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same shade for background and border causing low contrast.

Choosing text color too light to read on background.

The card uses bg-gray-100 for a light background, border-gray-300 for a subtle border, and text-gray-800 for readable dark text.