Tailwind CSS a href link Example

In this tutorial we will see how to use a href link in tailwind css. Also we will create a href link style, text decoration style, link underline and hover effect, tailwind link button, example with Tailwind CSS.


Example 1

Tailwind CSS simple links text with text-blue-{size} class and underline class.

<a href="#" class="text-blue-500 underline">Tailwind CSS a href Link</a>
tailwind css a href link

tailwind css a href link

Also you can use different color text decoration style.

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


Example 2

Tailwind CSS a href with hover effect.

<a href="#" class="text-blue-500 underline hover:text-blue-700">Tailwind CSS a href Link</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>


Example 3

Tailwind CSS link button.

<a href="#"
  class="px-6 py-3 text-blue-100 no-underline bg-blue-500 rounded hover:bg-blue-600 hover:underline hover:text-blue-200">Link
  Button</a>
tailwind css link button

tailwind css link button