Tailwind CSS a href link Example

#tailwindcss #css #webdev #tutorial

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.

view

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>

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>