DEV Community

Cover image for Tailwind CSS a href link Example
Saim Ansari
Saim Ansari

Posted on • Originally published at larainfo.com

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.

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

tailwind a href with style

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

tailwind css link button

Top comments (1)

Collapse
 
irishgeoff22 profile image
irishgeoff22

This cool effect too

play.tailwindcss.com/1Zw8d6vaJc