In this tutorial we will see how to use text decoration style in tailwind css. Also we will see responsive text decoration style, hover underline text decoration style example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Examples
tailwind css simple text decoration style with solid, double, dotted, dashed, wavy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Text Decoration Style Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<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>
</body>
</html>
tailwind css text decoration style
tailwind css text decoration style with colors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Text Decoration Style Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<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>
</body>
</html>
tailwind css text decoration style colors
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>
Read Also
Tailwind CSS Text Align Example
Tailwind CSS Text Color Example
Tailwind CSS Text Decoration Example
Tailwind CSS Text Decoration Style Example
How to Use Text Underline Offset in Tailwind CSS
How to Use Text Decoration Thickness in Tailwind CSS
How to Use Truncate Line Text in Tailwind CSS
