0
0
Tailwindmarkup~5 mins

Text decoration and underline in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.