In this tutorial we will see how to use text decoration color in tailwind css. Also we will see responsive text decoration color, hover underline text decoration color example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Examples
tailwind css simple text decoration 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 Color Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p>
Tailwind CSS Text Decoration
<a href="#" class="underline decoration-blue-600">Color</a>
</p>
<p>
Tailwind CSS Text Decoration
<a href="#" class="underline decoration-green-600">Color</a>
</p>
<p>
Tailwind CSS Text Decoration
<a href="#" class="underline decoration-red-600">Color</a>
</p>
<p>
Tailwind CSS Text Decoration
<a href="#" class="underline decoration-indigo-500">Color</a>
</p>
<p>
Tailwind CSS Text Decoration
<a href="#" class="underline decoration-yellow-500">Color</a>
</p>
</body>
</html>
tailwind css text decoration colors
tailwind css text decoration color with underline, overline, line-through.
<!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 Color Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline decoration-blue-600">
Tailwind CSS Text Decoration Color with Underline
</p>
<p class="overline decoration-green-600">
Tailwind CSS Text Decoration Color with Overline
</p>
<p class="line-through decoration-red-600">
Tailwind CSS Text Decoration Color with Line Through
</p>
</body>
</html>
tailwind css text decoration color with underline
tailwind css text decoration color with opacity.
<!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 Color Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline decoration-blue-600/25">
Tailwind CSS Text Decoration Color with Opacity
</p>
<p class="underline decoration-blue-600/30">
Tailwind CSS Text Decoration Color with Opacity
</p>
<p class="underline decoration-blue-600/50">
Tailwind CSS Text Decoration Color with Opacity
</p>
<p class="underline decoration-blue-600/75">
Tailwind CSS Text Decoration Color with Opacity
</p>
<p class="underline decoration-blue-600/[.33]">
Tailwind CSS Text Decoration Color with Opacity
</p>
</body>
</html>
tailwind css hover text decoration color.
<a class="underline decoration-blue-400 hover:decoration-blue-700">
Tailwind CSS hover Text Decoration Color
</a>
tailwind css responsive text decoration color.
<p class="underline decoration-blue-400 lg:decoration-blue-600">Tailwind CSS Responsive Text Decoration Color</p>
tailwind css custom text decoration color.
<p class="underline decoration-[#ff00ff]">Tailwind CSS Custom Text Decoration Color</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
