Bird
Raised Fist0
Tailwindmarkup~5 mins

Text decoration and underline in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Text decoration helps you add styles like underlines to words. It makes important text stand out or look different.

To underline links so users know they can click them.
To show that some text is important or a heading.
To add a line through text to show it is crossed out.
To decorate text with different styles for better design.
To remove underlines from links for a cleaner look.
Syntax
Tailwind
class="underline"
class="line-through"
class="no-underline"
class="decoration-[color]"
class="decoration-[style]"

Use underline to add an underline.

Use line-through to add a line through the text.

Examples
Adds a simple underline below the text.
Tailwind
<p class="underline">This text is underlined.</p>
Shows the text as crossed out.
Tailwind
<p class="line-through">This text has a line through it.</p>
Removes underline from text, often used on links.
Tailwind
<p class="no-underline">This link has no underline.</p>
Underlines text with a red line instead of default color.
Tailwind
<p class="underline decoration-red-500">Red underline color.</p>
Sample Program

This page shows different text decorations using Tailwind CSS. The heading is underlined with a blue line. The first paragraph is simply underlined. The second paragraph has a line through it to show it is crossed out. The link has no underline normally but shows underline when hovered.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Text Decoration Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 font-sans">
  <main>
    <h1 class="text-2xl font-bold underline decoration-blue-600">Welcome to Tailwind Text Decoration</h1>
    <p class="mt-4 underline">This paragraph is underlined.</p>
    <p class="mt-2 line-through text-gray-500">This text is crossed out.</p>
    <a href="#" class="mt-2 block no-underline text-green-600 hover:underline">This link has no underline by default but underlines on hover.</a>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Tailwind uses utility classes to add or remove text decorations easily.

You can combine underline with decoration-[color] to change underline color.

Use no-underline to remove underlines, especially on links.

Summary

Use underline to add underlines to text.

Use line-through to cross out text.

Combine with color classes to style the underline color.

Practice

(1/5)
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