Text decoration and underline in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the effect of this Tailwind class?

Consider the following HTML snippet:

<p class="underline decoration-red-500">Hello World</p>

What will the text look like in the browser?

Tailwind

<p class="underline decoration-red-500">Hello World</p>

A The text is underlined with a red line.

B The text is underlined with a default black line.

C The text is not underlined but colored red.

D The text is bold and underlined.

💡 Hint

The 'underline' class adds an underline, and 'decoration-red-500' changes the underline color.

The 'underline' class adds an underline to the text. The 'decoration-red-500' class changes the underline color to a shade of red. So the text will have a red underline.

🧠 Conceptual

intermediate

Which Tailwind class removes underline from a link?

You have a link styled with an underline by default. Which Tailwind class will remove the underline?

Tailwind

<a href="#" class="?">Click me</a>

A text-no-underline

B underline-none

C decoration-none

D no-underline

💡 Hint

Tailwind uses 'no-underline' to remove underlines.

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

❓ rendering

advanced

What is the visual difference between these two classes?

Look at these two Tailwind classes:

underline decoration-dotted

and

underline decoration-double

What difference will you see in the underline style?

A Both show a solid underline with different thickness.

B The first shows no underline, the second shows a dashed underline.

C The first shows a dotted underline, the second shows a double line underline.

D Both show a single solid underline but different colors.

💡 Hint

The 'decoration-' prefix controls the underline style.

The 'decoration-dotted' class makes the underline dotted. The 'decoration-double' class makes the underline appear as two parallel lines.

❓ selector

advanced

Which Tailwind class combination creates a thick, wavy underline?

You want to style text with an underline that is thick and wavy. Which combination of Tailwind classes achieves this?

A underline decoration-double decoration-2

B underline decoration-wavy decoration-4

C underline decoration-solid decoration-8

D underline decoration-dotted decoration-1

💡 Hint

'decoration-wavy' sets the underline style, 'decoration-4' sets thickness.

'underline' adds underline, 'decoration-wavy' makes it wavy, and 'decoration-4' sets a thicker underline line.

❓ accessibility

expert

How to ensure underlined text is accessible for colorblind users?

You use Tailwind to underline important text with a colored underline. What is the best practice to ensure accessibility for colorblind users?

A Use underline with a color that has strong contrast and add an additional visual cue like bold or italics.

B Only rely on underline color to convey meaning without other styles.

C Remove underline and use color alone to indicate importance.

D Use underline with a very light color to keep it subtle.

💡 Hint

Accessibility means not relying on color alone to convey information.

Colorblind users may not distinguish colors well. Combining underline with strong contrast and another style like bold or italics helps everyone understand the emphasis.