How to Use a href link in Tailwind CSS

In this tutorial, we will explore how to style anchor (<a>) links using Tailwind CSS. We will cover creating custom link styles, text decoration, adding underlines and hover effects, and creating link buttons.

View Demo

Tailwind CSS <a> href link Example

In Tailwind CSS, you can create simple links using the text-blue-{size} class for color and the underline class for adding underlines.

<a href="#" class="text-blue-300 underline">Tailwind CSS a href Link</a>
<a href="#" class="text-blue-400 underline">Tailwind CSS a href Link</a>
<a href="#" class="text-blue-500 underline">Tailwind CSS a href Link</a>
<a href="#" class="text-blue-600 underline">Tailwind CSS a href Link</a>
<a href="#" class="text-blue-700 underline">Tailwind CSS a href Link</a>
<a href="#" class="text-blue-800 underline">Tailwind CSS a href Link</a>

You can also apply different text decoration styles, such as red, green, blue, and purple.

<a href="#" class="text-blue-500 underline">Tailwind CSS a href Link with color</a>
<a href="#" class="text-red-500 underline">Tailwind CSS a href Link with color</a>
<a href="#" class="text-green-500 underline">Tailwind CSS a href Link with color</a>
<a href="#" class="text-purple-500 underline">Tailwind CSS a href Link with color</a>

Tailwind CSS a href with hover effect.

<a href="#" class="text-blue-500 underline hover:text-blue-700">Tailwind CSS a href Link with hover</a>

Show under only hover state.

<a href="#" class="text-blue-500 no-underline hover:underline hover:text-blue-700">Tailwind CSS a href Link</a>

Tailwind CSS a link with button.

<a href="#"
    class="px-4 py-2 text-blue-100 no-underline bg-blue-500 rounded hover:bg-blue-600 hover:underline hover:text-blue-200">Link
    Button</a>

Tailwind CSS <a> href link Example

saim ansari