How to Use Text Decoration Style in Tailwind CSS

In this tutorial, we will create a simple validation form UI, along with success and error messages. We will also cover validation with SVG icons and provide login form validation examples using Tailwind CSS.

View Demo

Tailwind CSS Text Decoration Style

Tailwind CSS: Simple text decoration styles with solid, double, dotted, dashed, and wavy.

<p class="underline decoration-solid">Tailwind CSS Text Decoration Style</p>
<p class="underline decoration-double">Tailwind CSS Text Decoration Style</p>
<p class="underline decoration-dotted">Tailwind CSS Text Decoration Style</p>
<p class="underline decoration-dashed">Tailwind CSS Text Decoration Style</p>
<p class="underline decoration-wavy">Tailwind CSS Text Decoration Style</p>

tailwind css text decoration style with colors.

<p class="underline decoration-solid decoration-pink-500">
    Tailwind CSS Text Decoration Style with Color
</p>
<p class="underline decoration-double decoration-yellow-500">
    Tailwind CSS Text Decoration Style with Color
</p>
<p class="underline decoration-dotted decoration-orange-500">
    Tailwind CSS Text Decoration Style with Color
</p>
<p class="underline decoration-dashed decoration-blue-500">
    Tailwind CSS Text Decoration Style with Color
</p>
<p class="underline decoration-wavy decoration-green-500">
    Tailwind CSS Text Decoration Style with Color
</p>

tailwind css text decoration style with hover.

<p class="underline hover:decoration-dashed">Tailwind CSS hover Text Decoration Style</p>

tailwind css responsive text decoration style.

<p class="underline md:decoration-dashed">Tailwind CSS Responsive Text Decoration Style</p>

Tailwind CSS Text Decoration Style

saim ansari