DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Tailwind CSS a href link Example
larainfo
larainfo

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 (0)

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡