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.