In this tutorial we will see how to use text decoration thickness in tailwind css. Also we will see text decoration thickness color hover text decoration thickness example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Examples
tailwind css simple text decoration thickness.
<!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 Decoration Thickness in Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline decoration-auto">
Tailwind CSS Text Decoration Thickness
</p>
<p class="underline decoration-from-font">
Tailwind CSS Text Decoration Thickness
</p>
<p class="underline decoration-0">Tailwind CSS Text Decoration Thickness</p>
<p class="underline decoration-1">Tailwind CSS Text Decoration Thickness</p>
<p class="underline decoration-2">Tailwind CSS Text Decoration Thickness</p>
<p class="underline decoration-4">Tailwind CSS Text Decoration Thickness</p>
<p class="underline decoration-8">Tailwind CSS Text Decoration Thickness</p>
</body>
</html>
text decoration thickness in tailwind css
tailwind css text decoration thickness with color.
<!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 Decoration Thickness in Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline decoration-2 decoration-blue-500">
Tailwind CSS Text Decoration Thickness With Color
</p>
<p class="underline decoration-2 decoration-green-500">
Tailwind CSS Text Decoration Thickness With Color
</p>
<p class="underline decoration-2 decoration-red-500">
Tailwind CSS Text Decoration Thickness With Color
</p>
<p class="underline decoration-2 decoration-yellow-500">
Tailwind CSS Text Decoration Thickness With Color
</p>
</body>
</html>
tailwind css text decoration thickness with color
tailwind css text decoration thickness with color and style.
<!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 Decoration Thickness in Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="underline decoration-2 decoration-solid decoration-blue-500">
Tailwind CSS Text Decoration Thickness With Color and Style
</p>
<p class="underline decoration-2 decoration-double decoration-green-500">
Tailwind CSS Text Decoration Thickness With Color and Style
</p>
<p class="underline decoration-2 decoration-dotted decoration-red-500">
Tailwind CSS Text Decoration Thickness With Color and Style
</p>
<p class="underline decoration-2 decoration-dashed decoration-yellow-500">
Tailwind CSS Text Decoration Thickness With Color and Style
</p>
<p class="underline decoration-2 decoration-wavy decoration-purple-500">
Tailwind CSS Text Decoration Thickness With Color and Style
</p>
</body>
</html>
tailwind css text decoration thickness with color and style
tailwind css hover text decoration thickness.
<p class="underline hover:decoration-4">
Tailwind CSS hover Text Decoration Thickness
</p>
tailwind css responsive text decoration thickness.
<p class="underline md:decoration-4">
Tailwind CSS Responsive Text Decoration Thickness
</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 Underline Offset in Tailwind CSS
How to Use Truncate Line Text in Tailwind CSS
