In this tutorial we will see how to use text underline offset in tailwind css. Also we will see text underline offset color, hover text underline offset example with Tailwind CSS.
Examples
tailwind css simple text underline offset.
<!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>How to Use Text Underline Offset in Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline text-lg underline-offset-0">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-1">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-2">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-4">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-8">
Tailwind CSS Text Underline Offset
</p>
</body>
</html>
tailwind css text underline offset
tailwind css text underline offset 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>How to Use Text Underline Offset in Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline text-lg underline-offset-1 decoration-blue-500">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-2 decoration-green-500">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-4 decoration-red-500">
Tailwind CSS Text Underline Offset
</p>
<p class="underline text-lg underline-offset-8 decoration-yellow-500">
Tailwind CSS Text Underline Offset
</p>
</body>
</html>
tailwind css text underline offset with colors
tailwind css text underline offset with thickness.
<p class="underline text-lg underline-offset-1 decoration-2 decoration-blue-500">
Tailwind CSS Text Underline Offset with thickness
</p>
tailwind css hover text underline offset.
<p class="underline hover:underline-offset-4">
tailwind css hover text underline offset
</p>
tailwind css responsive text underline offset.
<p class="underline md:underline-offset-4">
tailwind css responsive text underline offset
</p>
Read Also
Tailwind CSS Text Align Example
Tailwind CSS Text Color Example
Tailwind CSS Text Decoration Example
Tailwind CSS Text Decoration Color Example
Tailwind CSS Text Decoration Style Example
How to Use Text Decoration Thickness in Tailwind CSS
