Tailwind CSS - Text Decoration

Previous
Quiz
Next

Tailwind CSS Text Decoration consists of utility classes that enable quick and easy addition and adjustment of text decorations within HTML elements without requiring custom CSS.

Tailwind CSS Text Decoration Classes

Below is a list of Tailwind CSS Text Decoration classes that include properties that control the visual style of text.

Class CSS Properties
underline text-decoration-line: underline;
overline text-decoration-line: overline;
line-through text-decoration-line: line-through;
no-underline text-decoration-line: none;

Functionality Of Tailwind CSS Text Decoration Classes

  • underline: This class adds a line below the text.
  • overline: This class puts a line over the text.
  • line-through: This class draws a line through the text.
  • no-underline: This class removes any underline decoration from the text.

Tailwind CSS Text Decoration Class Examples

Below are examples of Tailwind CSS Text Decoration classes that show how text can be styled with different decorations like underline, overline, line-through, and no-underline.

Applying Text Decoration

This example shows the use of Tailwind CSS Text Decoration classes to style text decoration in HTML elements.

Example

 
<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Position
    </h1> 
    <p> Underline class</p>
    <p class="underline text-2xl mb-4">
        This text uses the underline class.
    </p>
     <p>Overline class</p>
     <p class="overline text-2xl mb-4">
        This text uses the overline class.
    </p>
     <p>Line-through class</p>
    <p class="line-through text-2xl mb-4 ">
        This text uses the line-through class.
    </p>
     <p> No-underline class</p>
    <p class="no-underline text-2xl">
        This text uses the no-underline class.
    </p>
</body>

</html>

Conditional Text Decoration on Hover

The example shows the conditional application of Tailwind CSS Text Decoration classes, using utility classes with modifiers to control different states. For example, 'hover:underline' applies an underline to text when hovered over.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
   <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Position
    </h1> 
    <h2 class="text-2xl mb-4">Hover to toggle line</h2>
    <p class="underline mb-6 hover:no-underline">
        Text is underlined by default.
    </p>
        <p class="overline mb-6 hover:no-underline"> 
        Text has an overline by default.
    </p>
    <p class="line-through mb-6 hover:underline">
        Text has a line through it by default.
    </p>
    <p class="no-underline mb-4 hover:underline">
        Text has no underline by default.
    </p>
</body>

</html>
Print Page
Previous
Next