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.

Practice

1. What does the Tailwind class text-red-500 do to the text?

easy

A. Changes the text color to a medium shade of red

B. Makes the text bold

C. Adds a red background behind the text

D. Underlines the text with a red line

Solution

1. Step 1: Understand Tailwind text color syntax

   The class text-red-500 uses the format text-{color}-{shade} to set text color.

2. Step 2: Interpret the color and shade

   Here, red is the color and 500 is a medium shade, so it changes text color to medium red.

3. Final Answer:

   Changes the text color to a medium shade of red -> Option A

4. Quick Check:

   text-red-500 sets medium red text color [OK]

Hint: Remember text-{color}-{shade} sets text color [OK]

Common Mistakes:

• Confusing text color with background color
• Thinking it changes font weight
• Assuming it adds underline

2. Which of these is the correct Tailwind class to make text blue with a light shade?

easy

A. text-blue-900

B. text-light-blue

C. text-blue-100

D. text-blue-light

Solution

1. Step 1: Recall Tailwind shade numbering

   Lower numbers like 100 mean lighter shades, higher numbers like 900 mean darker shades.

2. Step 2: Identify correct syntax for light blue text

   text-blue-100 is the correct format for light blue text color.

3. Final Answer:

   text-blue-100 -> Option C

4. Quick Check:

   Light shade uses 100 number [OK]

Hint: Use lower shade numbers for lighter colors [OK]

Common Mistakes:

• Using invalid class names like text-light-blue
• Confusing shade numbers (900 is dark)
• Mixing background and text color classes

3. What color will the text be with this HTML snippet?

<p class="text-green-700">Hello</p>

medium

A. A dark green color

B. A light green color

C. A medium blue color

D. A bright red color

Solution

1. Step 1: Analyze the class name

   The class text-green-700 sets the text color to green with shade 700, which is a darker shade.

2. Step 2: Match shade to color intensity

   Shade 700 is darker than 500 or 400, so the text will appear dark green.

3. Final Answer:

   A dark green color -> Option A

4. Quick Check:

   Shade 700 means dark color [OK]

Hint: Higher shade number means darker color [OK]

Common Mistakes:

• Assuming 700 is light shade
• Mixing green with blue or red
• Ignoring the shade number

4. Identify the error in this Tailwind class usage:

<span class="text-purple-">Sample</span>

medium

A. Wrong color name 'purple'

B. Missing shade number after color name

C. Class should be 'bg-purple-' for background color

D. Text color classes cannot be used on span elements

Solution

1. Step 1: Check the class syntax

   The class text-purple- ends with a dash but no shade number, which is invalid.

2. Step 2: Confirm correct usage

   Tailwind requires a shade number like 100, 500, 700 after the color name for text color classes.

3. Final Answer:

   Missing shade number after color name -> Option B

4. Quick Check:

   Shade number is required after color [OK]

Hint: Always include shade number after color in text classes [OK]

Common Mistakes:

• Leaving out the shade number
• Confusing text and background classes
• Thinking any element can't have text color

5. You want to make text that is easy to read on a dark background using Tailwind. Which class should you use?

hard

A. text-white-500

B. text-gray-900

C. text-black

D. text-gray-100

Solution

1. Step 1: Understand contrast needs on dark backgrounds

   Light text colors are easier to read on dark backgrounds, so a light gray or white is best.

2. Step 2: Evaluate the options

   text-gray-100 is a very light gray, suitable for dark backgrounds. text-gray-900 and text-black are dark colors, hard to read on dark backgrounds. text-white-500 is invalid because white doesn't have shades.

3. Final Answer:

   text-gray-100 -> Option D

4. Quick Check:

   Light colors for dark backgrounds [OK]

Hint: Use light shades for text on dark backgrounds [OK]

Common Mistakes:

• Using dark text on dark backgrounds
• Assuming white has shade numbers
• Confusing background and text colors