Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Text Decoration Style

Quiz

Tailwind CSS Text Decoration Styles is a utility class that provides easy ways to add or remove text decoration styles from text elements on web pages.

Tailwind CSS Text Decoration Style Classes

Below is a list of Tailwind CSS Text Decoration Style classes with properties that enable various text decoration styles.

Class	CSS Properties
decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

Functionality Of Tailwind CSS Text Decoration Style Classes

decoration-solid: This class applies a solid line below the text.
decoration-double: This class applies a double-line underline to text.
decoration-dotted: This class decorates text with a series of dots.
decoration-dashed: This class applies a dashed line below the text.
decoration-wavy: This class applies a wavy underline to text.

Tailwind CSS Text Decoration Style Class Examples

Below are examples of Tailwind CSS Text Decoration Style classes that show different text decoration styles such as solid lines, dots, dashed, and more.

Setting Text Decoration Styles

This example shows the use of Tailwind CSS Text Decoration Styles classes to apply different text decoration styles to HTML elements.

Example

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

<body class="p-4">
    <h1 class="text-3xl font-bold mb-6">
        Tailwind CSS  Text Decoration Style
    </h1> 
   
    <p class="underline decoration-solid mb-4 text-lg">
         Text with solid line underneath.
    </p>
    
    <p class="underline decoration-double  mb-4 text-lg">
        Text with double underline.
    </p>
    
    <p class="underline decoration-dotted mb-4 text-lg">
        Text with dotted underline.
    </p>
    
    <p class="underline decoration-dashed mb-4 text-lg">
        Text with dashed underline.
    </p>
    
    <p class="underline decoration-wavy text-lg">
        Text with wavy underline.
    </p> 
</body>

</html>

Conditional Text Decoration Styles on Hover

The example shows the conditional application of Tailwind CSS Text Decoration styles 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-3xl font-bold mb-6 hover:no-underline">
        Tailwind CSS  Text Decoration Style
    </h1> 
    <h2 class="text-2xl mb-4">Hover to toggle line</h2>
    <p class="underline decoration-solid 
              mb-4 text-lg hover:no-underline">
         Text with solid line underneath.
    </p>    
    <p class="underline decoration-double  
              mb-4 text-lg hover:no-underline">
        Text with double underline.
    </p>    
    <p class="underline decoration-dotted 
              mb-4 text-lg hover:no-underline">
        Text with dotted underline.
    </p>
    <p class="underline decoration-dashed  
              mb-4 text-lg hover:no-underline">
        Text with dashed underline.
    </p>    
    <p class="underline decoration-wavy-on-hover 
              text-lg hover:no-underline">
        Text with wavy underline.
    </p> 
</body>

</html>

Print Page