Text decoration and underline in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an underline to the text using Tailwind CSS.

Tailwind

<p class="[1]">This text should be underlined.</p>

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

Aitalic

Btext-bold

Cbg-blue-500

Dunderline

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-bold which is not a valid Tailwind class and does not underline.

Using italic which slants text but does not underline.

The underline class in Tailwind adds an underline to the text.

2fill in blank

medium

Complete the code to remove underline from a link using Tailwind CSS.

Tailwind

<a href="#" class="[1]">No underline link</a>

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

Atext-red-500

Bunderline

Cno-underline

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using underline which adds underline instead of removing it.

Using color or font classes which do not affect underline.

The no-underline class removes the underline from text, commonly used on links.

3fill in blank

hard

Fix the error in the code to correctly add a line-through decoration using Tailwind CSS.

Tailwind

<span class="[1]">This text is crossed out.</span>

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

Aunderline

Bline-through

Cno-underline

Dtext-strike

Attempts:

3 left

💡 Hint

Common Mistakes

Using underline which underlines instead of crossing out.

Using text-strike which is not a valid Tailwind class.

The line-through class adds a line through the text, showing it as crossed out.

4fill in blank

hard

Fill both blanks to create a paragraph with underlined and bold text using Tailwind CSS.

Tailwind

<p class="[1] [2]">Important underlined text</p>

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

Aunderline

Bfont-bold

Citalic

Dno-underline

Attempts:

3 left

💡 Hint

Common Mistakes

Using italic which slants text but does not make it bold.

Using no-underline which removes underline.

Use underline to add underline and font-bold to make text bold.

5fill in blank

hard

Fill all three blanks to create a link that is underlined, blue, and changes to red on hover using Tailwind CSS.

Tailwind

<a href="#" class="[1] [2] [3]">Hover me</a>

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

Aunderline

Btext-blue-600

Chover:text-red-600

Dno-underline

Attempts:

3 left

💡 Hint

Common Mistakes

Using no-underline which removes underline.

Forgetting the hover: prefix for hover effects.

Use underline for underline, text-blue-600 for blue text, and hover:text-red-600 to change text color on hover.

Practice

1. Which Tailwind CSS class adds an underline to text?

easy

A. line-through

B. no-underline

C. underline

D. text-underline

Solution

1. Step 1: Understand the purpose of each class

   The underline class adds an underline to text, while line-through crosses out text, no-underline removes underline, and text-underline is not a valid Tailwind class.

2. Step 2: Match the class to the underline effect

   Since the question asks for adding underline, underline is the correct class.

3. Final Answer:

   underline -> Option C

4. Quick Check:

   Underline class = underline [OK]

Hint: Underline text with class 'underline' in Tailwind [OK]

Common Mistakes:

• Confusing underline with line-through
• Using no-underline to add underline
• Assuming text-underline exists

2. Which of these is the correct Tailwind class to remove underline from a link?

easy

A. no-underline

B. line-through

C. underline

D. text-no-underline

Solution

1. Step 1: Identify the class that removes underline

   The class no-underline removes underline decoration from text.

2. Step 2: Verify other options

   underline adds underline, line-through crosses out text, and text-no-underline is not a valid Tailwind class.

3. Final Answer:

   no-underline -> Option A

4. Quick Check:

   Remove underline = no-underline [OK]

Hint: Use 'no-underline' to remove underlines in Tailwind [OK]

Common Mistakes:

• Using underline to remove underline
• Assuming text-no-underline exists
• Confusing line-through with no-underline

3. What will be the visual effect of this HTML snippet?

<p class="underline line-through text-red-500">Hello</p>

medium

A. Text has no decoration but is red

B. Text is only underlined in red color

C. Text is only crossed out in red color

D. Text is underlined and crossed out in red color

Solution

1. Step 1: Analyze the classes applied

   The classes underline and line-through add underline and line-through decorations respectively. text-red-500 colors the text red.

2. Step 2: Understand combined text decorations

   Both underline and line-through appear simultaneously, so the text will be underlined and crossed out in red color.

3. Final Answer:

   Text is underlined and crossed out in red color -> Option D

4. Quick Check:

   underline + line-through + red text = underlined & crossed out red text [OK]

Hint: Multiple decorations combine visually in Tailwind [OK]

Common Mistakes:

• Thinking only one decoration applies
• Ignoring color class effect
• Assuming decorations override each other

4. Identify the error in this Tailwind usage:

<span class="underline text-underline-red">Sample</span>

medium

A. text-underline-red is not a valid Tailwind class

B. underline class is misspelled

C. Missing no-underline to remove underline

D. Underline cannot be used on span

Solution

1. Step 1: Check validity of classes

   underline is valid and adds underline. text-underline-red is not a valid Tailwind class for underline color.

2. Step 2: Understand how to color underline

   Tailwind uses decoration-red-500 or similar for underline color, not text-underline-red.

3. Final Answer:

   text-underline-red is not a valid Tailwind class -> Option A

4. Quick Check:

   Invalid class name = text-underline-red [OK]

Hint: Use 'decoration-color' classes for underline color [OK]

Common Mistakes:

• Using text-underline-red instead of decoration-red-500
• Assuming underline color uses text- prefix
• Thinking underline can't be on span

5. You want to create a paragraph with a green underline but no line-through. Which Tailwind classes should you use?

hard

A. underline decoration-green-600 no-line-through

B. underline decoration-green-600

C. underline text-green-600 line-through

D. underline decoration-green-600 line-through

Solution

1. Step 1: Choose classes for underline and color

   underline adds underline, and decoration-green-600 colors the underline green.

2. Step 2: Avoid line-through classes

   Since no line-through is wanted, do not add line-through or any similar class. There is no no-line-through class in Tailwind.

3. Final Answer:

   underline decoration-green-600 -> Option B

4. Quick Check:

   Underline + green decoration, no line-through [OK]

Hint: Use 'underline' + 'decoration-color' for colored underline [OK]

Common Mistakes:

• Adding non-existent no-line-through class
• Using text-green-600 colors text, not underline
• Including line-through by mistake