Text Decoration Utilities

Text decoration utilities in Tailwind CSS are used to add decorative styles to text.

These utilities help create:

underlined text
strike-through text
clean link styles

Text decoration improves:

content emphasis
visual appearance
UI styling

Text Decoration Classes

Class	Meaning
`underline`	Underlined text
`line-through`	Strike-through text
`no-underline`	Removes underline

Example: Basic Text Decoration

<!DOCTYPE html>
<html>
<head>
  <title>Text Decoration Example</title>

  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6 space-y-4">

  <p class="underline">
    Underlined Text
  </p>

  <p class="line-through">
    Deleted Text
  </p>

  <a href="#" class="no-underline text-blue-600">
    Normal Link
  </a>

</body>
</html>

Body Classes

<body class="p-6 space-y-4">

p-6

Adds padding around webpage content.

space-y-4

Adds spacing between elements.

Underlined Text

<p class="underline">

underline

Adds underline below text.

Used for:

links
important text
highlighted content

Strike-through Text

<p class="line-through">

line-through

Creates a line across the text.

Used for:

deleted content
completed tasks
old prices

Remove Underline

<a href="#" class="no-underline text-blue-600">

no-underline

Removes underline from links.

text-blue-600

Changes link color to blue.

Text Decoration Usage

Class	Typical Usage
`underline`	Links and emphasis
`line-through`	Deleted items
`no-underline`	Clean navigation links

Advantages of Text Decoration Utilities

Better content emphasis
Improved UI styling
Easy link customization
Cleaner webpage design
Faster text formatting

Summary

In this topic, we learned how text decoration utilities in Tailwind CSS help style and emphasize text content. We explored underline, strike-through, and no-underline utilities and understood their usage in links, deleted content, and webpage formatting.

Keywords

Text Decoration Utilities, underline, line-through, no-underline, Typography, Link Styling, Tailwind Typography, UI Design, Text Formatting, Modern Web Design, Frontend Development.