Text color utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the text color to red using Tailwind CSS.

Tailwind

<p class="text-[1]-500">This text is red.</p>

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

Ared

Byellow

Cblue

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not supported by Tailwind.

Forgetting the shade number after the color name.

The class text-red-500 sets the text color to a medium red shade in Tailwind CSS.

2fill in blank

medium

Complete the code to make the text color blue with Tailwind CSS.

Tailwind

<span class="[1]-600">Blue text here.</span>

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

Abg-blue

Btext-blue

Cborder-blue

Dhover-blue

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color classes instead of text color classes.

Omitting the shade number.

The class text-blue-600 sets the text color to a darker blue shade.

3fill in blank

hard

Fix the error in the code to correctly apply green text color in Tailwind CSS.

Tailwind

<h1 class="text-[1]-400">Green heading</h1>

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

Agreen

Bgrey

Cpink

Dorange

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that does not exist in Tailwind's palette.

Mixing up color names and shades.

The class text-green-400 applies a medium green text color.

4fill in blank

hard

Fill both blanks to create a paragraph with yellow text and a font size of large using Tailwind CSS.

Tailwind

<p class="[1] [2]">Yellow large text.</p>

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

Atext-yellow-500

Btext-red-500

Ctext-lg

Dtext-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong color class for yellow.

Confusing font size classes.

The class text-yellow-500 sets the text color to yellow, and text-lg sets the font size to large.

5fill in blank

hard

Fill all three blanks to create a heading with purple text, bold font, and extra large size using Tailwind CSS.

Tailwind

<h2 class="[1] [2] [3]">Purple bold heading</h2>

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

Atext-purple-700

Bfont-bold

Ctext-xl

Dtext-gray-700

Attempts:

3 left

💡 Hint

Common Mistakes

Using a gray color instead of purple.

Forgetting to add the bold font class.

text-purple-700 sets a strong purple color, font-bold makes the text bold, and text-xl sets an extra large font size.