In this tutorial we will see how to use text decoration in tailwind css. Also we will see responsive text decoration, hover underline text decoration example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Examples
tailwind css simple text decoration with underline, overline, line-through, no-underline.
<!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 Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline">Tailwind CSS Text Decoration Underline</p>
<p class="overline">Tailwind CSS Text Decoration Overline</p>
<p class="line-through">Tailwind CSS Text Decoration Line Through</p>
<p class="no-underline">Tailwind CSS Text Decoration No underline</p>
</body>
</html>
tailwind css text decoration
tailwind css text decoration with no underline but on hover underline.
<a href="#" class="no-underline hover:underline text-2xl text-blue-500">
Link with no underline but hover underline
</a>
tailwind css text decoration with underline
tailwind css responsive text decoration.
<p class="no-underline md:underline">
tailwind css responsive text decoration
</p>
Read Also
Tailwind CSS Text Align Example
Tailwind CSS Text Color Example
Tailwind CSS Text Decoration Color 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
