Sling Academy
Home/Tailwind CSS/Text Underline in Tailwind CSS

Text Underline in Tailwind CSS

Last updated: December 18, 2023

In Tailwind CSS, you can add an underline to text by using the underline utility. You can also control the offset (the distance between text and the line) of a text underline by using underline-offset-{option} classes. {option} can be: auto, 0, 1, 2, 4, 8.

Example 1

Screenshot:

The code:

<body class="p-20">
    <h1 class="underline text-5xl">Hello World</h1>
    <br/>
    <h1 class="underline underline-offset-8 text-4xl">Goodbye World</h1>
    <br />
    <p class="underline underline-offset-0 text-indigo-500">Have a nice day</p>
</body>

Example 2

This example demonstrates how to show an underline when hovering over a link.

Preview:

The code:

<body class="p-20">
    <a class="text-blue-600 text-4xl hover:underline" href="https://www.slingacademy.com">Welcome to
        Sling Academy</a>
</body>

That’s it. Happy coding & have a nice day!

Next Article: Tailwind CSS: How to Disable Text Selection

Previous Article: Tailwind CSS: Create a User Card with Circle Avatar

Series: Styling Text & Images with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)