Tailwind Text Decoration
This article extends our knowledge of Tailwind text decoration and its classes with examples.
Text decoration is an essential aspect of web design. It refers to the visual elements added to text to make it more readable and appealing.
In addition, it can be used to differentiate headings from body text, to indicate links, or to highlight key points. With the right text decoration, you can create a more engaging and interactive user experience.
Tailwind Text Decoration Classes:
Tailwind provides a variety of classes to add basic text decoration styles to your website.
These classes are based on the standard CSS text decoration properties and include:
| Classes | Overview |
| underline | This class is used to add an underline to the text element. Underline is a line below the text. |
| overline | Using this class, we can add an overline to the text element. Overline is a line above the text. |
| line-through | In this case, a line is inserted through the text. |
| no-underline | This class is used to remove the underline applied to a text element. |
Syntax
<element class="underline">...</element>
The following example focuses on the implementation of the underline and overline classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
<p class="">Using underline class</p>
<p class="underline mt-4">
MrExamples: Learning through examples
</p>
</div>
<div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
<p class="">Using overline class</p>
<p class="overline mt-4">
MrExamples: Learning through examples
</p>
</div>
</body>
</html>
Above example uses Tailwind CSS classes to add text decoration styles to a webpage.
The classes applied to the elements control properties such as margin, padding, width, background color, font size, font weight, and rounded corners.
The underline and overline classes are used to add text decoration styles to specific elements.
For this example, let’s consider implementing the line-through and no-underline classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
<p class="">Using line-through class</p>
<p class="line-through mt-4">
MrExamples: Learning through examples
</p>
</div>
<div class="w-3/5 mx-auto bg-amber-200 px-4 py-2 mt-8 font-medium rounded">
<p class="">Using no-underline class</p>
<p class="no-underline mt-4">
MrExamples: Learning through examples
</p>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
